变换:
context.save();//保存样式
context.restore();//恢复样式
context.translate(x,y);
浏览器变换:平移缩放、旋转
路径:
context.beginPath();//开始
context.moveTo(x,y);//不绘制,只是将当前位置移动到新的目标坐标(x,y)
context.lineTo(x,y);//不仅将当前位置移动到新的目标坐标(x,y),而且在两个坐标之间画一条直线
context.closePath();//将路径的起始坐标自动作为目标坐标。
描边样式:
context.lineWidth = 4;//线宽
context.lineJoin = 'round | bevel | miter';//接合点,拐角样式
context.strokeStyle = "#000";//颜色
context.lineCap = 'butt | square | round';//指定线条末端的样式
填充样式:
context.fillStyle = ‘#0000’;//填充颜色
context.fill();//填充
填充矩形区域:
context.fillRect( x, y, w, h);//填充的矩形区域
strokeRect//基于给出的位置和坐标画出矩形的轮廓
clearRect//清除矩形区域内的所有尼尔并将它恢复到初始状态,即透明色
绘制曲线:
context.quadraticCurveTo(x1,y1,x2,y2);
//(x2,y2)指曲线的终点,(x1,y1)指曲线的控制点(control point)
还有bezierCurveTo、arcTo和arc
在canvas中插入图片:
可以通过修正层为图片添加印章、拉伸图片或者修改图片等,并且图片通常会成为canvas上的焦点。
在呈现之前,应确保图片已经加载完毕。
context.drawImage(?,x,y,w,h);//?为图片var,其他依次为坐标和宽度与高度
渐变:
渐变是指在颜色集上使用逐步抽样算法,并将结果应用于描边样式和填充样式中。
三个步骤
1.创建渐变对象;
2.为渐变对象设置颜色,指明过度方式;
3.在context上为填充样式或者描边暗示设置渐变。
可以将渐变看做是颜色沿着一条线进行缓慢地变化。
要设置显示哪种颜色,在渐变对象上使用addColorStop函数即可。这个函数允许指定两个参数:颜色和偏移量。
颜色参数是指开发人员希望在偏移位置描边或填充时所使用的颜色。偏移量是一个0.0到1.0之间的数值,代表沿着渐变线渐变的距离有多远。
除了可以变换成其他颜色外,还可以为颜色设置alpha值(例如透明),并且alpha值也是可以变化的。为了达到这样的效果,需要使用颜色值的另一种表示方法。例如内置alpha组件的CSS rgba函数。