24个canvas基础知识小结

2019-01-28 16:41:34王旭

23、保存、恢复

contex.save();将当前状态保存到栈中。注意:保存的只是对绘制图形的设置和变换,不会保存绘制图形的内容。
context.restore();从栈中取出之前保存的图形状态
可以应用的场合:
(1)图像或图形变形
(2)图像裁剪
(3)改变图形上下文时属性时:fillStyle,font,globalAlpha,globalComposite-Operation,lineCap,lineJoin,lineWidth,miterLimit,shadowBlur,shadowColor,
shadowOffsetX,shadowOffsetY,strokeStyle,textAlign,textBaseline

24、线性渐变


复制代码

var g=context.createLinearGradient(xStart,yStart,xEnd,yEnd);
var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);
g.addColorStop(0,'red');
g.addColorStop(0,'green');
context.fillStyle=g;
context.fillRect(0,0,200,200);