Canvas学习笔记。

什么是Canvas？

步骤

绘制简单图形

直线

绘制直线的样式

矩形

绘制矩形（边框）

绘制并填充

清除矩形

或者填充为其他颜色。

三角形

圆形

圆心x、y坐标，半径，始、末角度，方向（默认false，顺时针，可不写）

角度，Math.PI = 180度，2*Math.PI = 360度。

绘制贝塞尔曲线

二次贝塞尔曲线：quadraticCurveTo(控制点x坐标，控制点y坐标，终点x坐标，终点y坐标)

var pen8 = document.querySelector('#myCanvas8').getContext('2d');
pen8.moveTo(50,50);
pen8.quadraticCurveTo(100,150,150,50);
pen8.stroke();

三次贝塞尔曲线：bezierCurveTo(控制点1x坐标，控制点1y坐标，控制点2x坐标，控制点2y坐标，终点x坐标，终点y坐标)。

1
2
3

pen9.moveTo(0,100);
pen9.bezierCurveTo(100,-50,100,250,200,100);//第一个控制点x、y
pen9.stroke();

还有四次、五次。。。

绘制文本

绘制图片

第一个用法，绘制的图片是原始大小。

第二个用法，可以设置宽高。

第三个用法，可以扣取图片的某一部分出来。s原图片中要扣取的坐标，d在画布中的绘制坐标。（x、y、宽、高）

图像裁剪

图像平铺

坐标变换

整个坐标系进行变换后（translate-改变原点、scale-缩放、rotate-旋转），不可逆(即使beginPath)，要想恢复需要提前保存状态。

save-保存当前画布状态；
restore-恢复最近一次的画布保存状态

更改坐标原点，translate(x,y)

var pen11 = document.querySelector('#myCanvas11').getContext('2d');
pen11.fillRect(0,0,50,50);
pen11.translate(100,100);//改变坐标原点，到中心。再绘制一个矩形（参数一样）
pen11.fillRect(0,0,50,50);

pen11.scale(0.5,0.5);//缩放
pen11.fillStyle = 'orange';
pen11.fillRect(0,0,50,50);

pen11.rotate(Math.PI/4);//旋转
pen11.fillStyle = 'dodgerblue';
pen11.fillRect(0,0,50,50);

渐变

线性渐变

createLinearGradient(开始坐标x、y，结束坐标x、y)

addColorStop添加渐变的颜色，0到1之间。

var pen = document.querySelector('#mycanvas1').getContext('2d');
// 绘制 线条
pen.moveTo(10,10);
pen.lineTo(100,190);
pen.lineWidth = 5;
var color = pen.createLinearGradient(0,0,100,100);
color.addColorStop(0,'white');
color.addColorStop(0.7,'pink');
color.addColorStop(1,'mediumpurple');
pen.strokeStyle = color;//应用渐变色
pen.stroke();

pen.strokeStyle = 'black';//恢复黑色

径向渐变

圆形1圆心x、y，圆形1半径，圆形2圆心x、y，圆形2半径

// 径向渐变
var color3 = pen2.createRadialGradient(50,50,0,50,50,40);
color3.addColorStop(0,'white');
color3.addColorStop(1,'pink');
pen2.beginPath();
pen2.arc(50,50,40,0,2*Math.PI);
pen2.fillStyle = color3;
pen2.fill();