-
实际例子,使用createRadialGradient(400,400,0,400,400,500);
绘制圆心为400,400 半径为0 和圆心400,400 半径为500的两个圆。
查看全部 -
实际例子。
查看全部 -
实际例子中,addColorStop(0.0,"#fff"); addColorStop(1.0,"#000")
表示从0 到百分之100的两个位置
查看全部 -
var grd = context.createLinearGradient(xstart,ystart,xend,yend); grd.addColorStop(stop1,color1); grd.addColorStop(stop2,color2);
查看全部 -
createLinearGradient()创建线性渐变
查看全部 -
图形变换小结
save();restore();translate(X,Y);rotate(deg);scale(sx,sy) transform(a,b,c,d,e,f); setTransform(a,b,c,d,e,f)
查看全部 -
设置变换矩阵
查看全部 -
setTransform(1,0,0,1,100,100);
由于transform()效果会叠加,所以当我们叠加了多次之后不知道如何改变的时候。可以使用setTransform()来重置,让之前的transform都失效
查看全部 -
transform();矩阵的使用
查看全部 -
变换矩阵的概念
查看全部 -
图形变换三大方法
查看全部 -
改造函数 将绘制路径单独抽出来作为一个函数
然后使用图形变换的方法translate() rotate(需要角度转弧度)等方法
改变路径的位置和形状
再绘制颜色边框等属性
查看全部 -
保存canvas的状态。避免被translate()这些函数影响
查看全部 -
运用Math.random()随机产生200个有差异的五角星
查看全部 -
context.fillStyle = "black"; context.fillRect(0,0,canvas.width,canvas.height);
绘制画布的背景颜色
查看全部
举报