先看demo,九十七度 其实使用svg画出这条龙很简单,关键不在于怎么使用svg,而在于你的美术功底,哈哈. 好吧,当然基础是不能忽略的,先看下这条龙的代码: <svg id="long" xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="450"> <path stroke="#fff&qu…

又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵树的主体. 我画树的使用的原理是,定义一个起始点,从这个点开始,向一个角度移动一段距离.得到另一个点. 画出一条线连接两个点. 以新得到的点,依旧向这个角度,移动一段距离.得到第三个点,连写第二第三个点. 以此类推.一定步长之后,就得到一条射线. 我们根据自然界中的真实树的情况,这条线越来越细,直到…

情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画出一个花瓣 1.画出一个长方形div,背景色设置成渐变色. 2.给四个角使用圆角,底部50%,顶部35% 然后使用css的3D属性 3D属性的详细请自行百度,这里不做详细介绍. 从Y轴方向上俯视玫瑰花,就是多个花瓣围绕圆心组成的同心圆. 如下图所示: 我们按照这个规则 1.越靠近中心层,花瓣数量越少…

本文作者:HelloGitHub-kalifun 在上一篇文章我们介绍了 Zdog 如何使用,接下来这篇文章我将带领各位利用 Zdog 画出一个 GitHub 章鱼猫(和官方的还是有些差别的). Zdog 项目地址:https://github.com/metafizzy/zdog 一.分析 通过上面的动画,我们可以对 GitHub 章鱼猫进行分析,给我们最直观的就是 7 部分.头部.脸.眼睛.鼻子.嘴巴.胡须.耳朵. 头部:由一个规则的实体圆角矩形组成. 脸:有两个规则的实体圆角矩形组成.第一…

c语言贪吃蛇详解-2.画出蛇 前几天的实验室培训课后作业我布置了贪吃蛇,今天有时间就来写一下题解.我将分几步来教大家写一个贪吃蛇小游戏.由于大家c语言未学完,这个教程只涉及数组和函数等知识点. 蛇的身体就是一些点,我们可以用二维数组把这些点的坐标存起来. 先声明一个足够大的二维数组.虽然我觉得你们玩不了这么长(手动滑稽). int s[H*W][2]; 这样s[0][0]表示蛇头的i坐标,s[0][1]表示蛇头的j坐标.s[i][0]表示蛇第i+1个点的i坐标.s[i][1]同理. 然后再声明一…

c语言贪吃蛇详解-1.画出地图 前几天的实验室培训课后作业我布置了贪吃蛇,今天有时间就来写一下题解.我将分几步来教大家写一个贪吃蛇小游戏.由于大家c语言未学完,这个教程只涉及数组和函数等知识点. 首先我们使用宏定义来定义两个常数,地图的高(H)和地图的宽(W) #define H 20 #define W 20 这样写的好处是以后改变地图的大小就不用更改写好的代码了,只要修改下宏定义.节省了时间又避免改出bug 接下来,我们定义一个二维数组,这个二维数组的每一个值刚好对应了平面的每一个点,这样就…

开始 妹子都喜欢流星,如果她说不喜欢,那她一定是一个假妹子. 现在就一起来做一场流星雨,用程序员的野路子浪漫一下. 要画一场流星雨,首先,自然我们要会画一颗流星. 玩过 canvas 的同学,你画圆画方画线条这么 6,如果说叫你画下面这个玩意儿,你会不会觉得你用的是假 canvas?canvas 没有画一个带尾巴玩意儿的 api 啊. 画一颗流星 是的,的却是没这个 api,但是不代表我们画不出来.流星就是一个小石头,然后因为速度过快产生大量的热量带动周围的空气发光发热,所以经飞过的地方看起来就…

function drawBar(data) { var barGraph = document.querySelector("#bar-graph"); var graphWidth = 700; var graphHeight = 300; const graphPadding = 25; //轴的宽高 const axisWidth = graphWidth - graphPadding; const axisHeigt = graphHeight - graphPadding;…

1.CAShapeLayer CAShapeLayer具有path属性,(是CGPath对象),可以使用这个属性与UIBezierPath画出想要的图形.该子类根据其fill color和strokeColor值对该路径填充或者描边,或二者都有,并显示结果.fillColor默认值是黑色,二strokenColor没有默认值.CAShapeLayer也可能有contents,该形状显示在内容图像的上方,但没有任何属性允许你指定合成模式(compositioning  mode). 普通CALay…

今天是个特殊的日子,圣诞节,也是周末,在这里先祝大家圣诞快乐!喜庆的日子,我们可以稍微放松一下,扯一扯昨天雷霆对战凯尔特人的比赛,这场比赛大威少又双叒叕拿下三双,而且是一个45+11+11的超级三双,其实小托马斯的表现也不遑多让,拿下31分9个助攻,末节一开始便带队打出一波小高潮反超比分,无奈威少爷最后几分钟暴走直接带走比赛,让人直呼精彩.好了,扯完之后我们进入正题. 今天给大家带来的是一个比较好玩的东西--H5坦克大战.这个东西的实现主要用到了H5的canvas以及原生的js,如果你已经是大牛…