Canvas中createRadialGradient的各种取值研究

话说上次melody同学分享了canvas绘图的相关内容,大家都对createRadialGradient的输入参数和结果蛮感兴趣的。因此我也把它的各种取值都试了一遍,发现了一些有趣的东西,共享之。

首先说下createRadialGradient,createRadialGradient是canvas创建发射渐变的一个方法,它的形参是这样子的:

createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

前三个参数是起始圆(cycle1)的x、y、半径,后三个是终点圆(cycle2)的x、y、半径。其它介......

【疯狂的菊花系列】Canvas绘制Loading动画

上回说到用png图片来做帧动画,总的来说也没什么大问题,但是画个菊花,按固定角度旋转N次做图实在是蛋疼。

既然怎么样都要画个菊花,那不如就用canvas来画算了。对于不支持canvas的浏览器,可以用svg,原理都差不多。

这个canvas动画的原理跟帧动画也类似,先绘制第一帧的画面,然后擦掉,接着绘制第二帧,以此循环。时间间隔短的话看上去就变成动画了。

具体解释请看代码,有足够的注释,或者也可以点这里看看结果。canvas的api说明可以在这里找到。

window.onload = function(){

var canvas = document.getElementById......