canvas基础

canvas元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。

1	<canvas id="tutorial" width="500" height="500"></canvas>

canvas只有两个属性width和height用来控制画布区域的大小

1 2	this.canvas = document.getElementById('tutorial'); // 获取画布元素 this.ctx = this.canvas.getContext('2d'); // 获取该画布的渲染上下文, 可以通过ctx绘制画布

简单的绘制🌰

this.ctx.fillStyle = 'rgb(200,0,0)'; // 设置画笔填充属性
this.ctx.fillRect(10, 10, 55, 50); // 填充长方形
this.ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'; // 重新设置画笔属性
this.ctx.fillRect(30, 30, 55, 50);

canvas画布的定位

canvas画布的定位以左上角为坐标原点(0,0), 向右x增加, 向下y增加

形状绘制

绘制路径
使用过 PS 的应该都会知道在 PS 中有路径的概念，在 canvas 中也是有路径的概念的。只不过和 PS 中的路径不同的是，PS 中的路径是矢量的，而 canvas 中的路径不是。下面我们来看一下有哪些创建路径的方法：

fill() 填充路径
- stroke()描边
- arc()创建圆弧
- rect()创建矩形
- fillRect()绘制矩形路径区域
- strokeRect()绘制矩形路径描边
- clearRect()在给定的矩形内清除指定的像素
- arcTo()创建两切线之间的弧/曲线
- beginPath()起始一条路径，或重置当前路径
- moveTo()把路径移动到画布中的指定点，不创建线条
- lineTo()添加一个新点，然后在画布中创建从该点到最后指定点的线条
| 样式 | 描述 |
| ———- | ——————– |
| lineCap | 设置或返回线条的结束端点样式 |
| lineJoin | 设置或返回两条线相交时，所创建的拐角类型 |
| lineWidth | 设置或返回当前的线条宽度 |
| miterLimit | 设置或返回最大斜接长度 |

掘金 — 一个帮助开发者成长的社区
- closePath()创建从当前点回到起始点的路径
- clip()从原始画布剪切任意形状和尺寸的区域
- quadraticCurveTo()创建二次方贝塞尔曲线
- bezierCurveTo()创建三次方贝塞尔曲线
- isPointInPath()如果指定的点位于当前路径中，则返回 true，否则返回 false…

原生图形 - 矩形

不同于SVG, HTML中的元素canvas只支持一种原生的图形绘制: 矩形.

this.ctx.fillRect(x, y, width, height) 绘制一个填充的矩形

this.ctx.strokeRect(x, y, width, height) 绘制一个矩形的边框

this.ctx.clearRect(x, y, width, height) 清除指定矩形区域，让清除部分完全透明。

绘制路径

this.ctx.beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

this.ctx.closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。

this.ctx.stroke()通过线条来绘制图形轮廓。

this.ctx.fill() 通过填充路径的内容区域生成实心的图形。

移动笔触

this.ctx.moveTo(x,y) 移动到(x,y)

划线

this.ctx.lineTo(x, y); 从当前位置到(x,y)之间划线, 并移动到(x,y)

圆弧

this.ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise) 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

this.ctx.arcTo(x1, y1, x2, y2, radius) 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

贝塞尔曲线

this.ctx.quadraticCurveTo(cp1x, cp1y, x, y)绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

this.ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

Path2D对象

1
2
3

new Path2D();     // 空的Path对象
new Path2D(path); // 克隆Path对象
new Path2D(d);    // 从SVG建立Path对象

🌰:

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);

    ctx.stroke(rectangle);
    ctx.fill(circle);
  }
}

色彩

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影距形状的水平距离
shadowOffsetY	设置或返回阴影距形状的垂直距离…

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

渐变

方法描述
createLinearGradient() 创建线性渐变（用在画布内容上）
createPattern() 在指定的方向上重复指定的元素
createRadialGradient() 创建放射状/环形的渐变（用在画布内容上）
addColorStop() 规定渐变对象中的颜色和停止位置

var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var cx = canvas.width = 400;
    var cy = canvas.height = 400;

    var grd = context.createLinearGradient(100,100,100,200);
    grd.addColorStop(0,'pink');
    grd.addColorStop(1,'white');

    context.fillStyle = grd;
    context.fillRect(100,100,200,200);...

https://juejin.im
掘金 — 一个帮助开发者成长的社区

图像转换

scale(x,y) 缩放当前绘图至更大或更小, x: 横轴缩放比例, y: 纵轴缩放比例
rotate(angle) 旋转当前绘图 angle : 旋转角度，以弧度计。, 如:度(20*Math.PI/180)
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()

绘制图片

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 向画布上绘制图像、画布或视频

img:规定要使用的图像、画布或视频。
sx:可选。开始剪切的 x 坐标位置。
sy:可选。开始剪切的 y 坐标位置。
swidth:可选。被剪切图像的宽度。
sheight:可选。被剪切图像的高度。
x:在画布上放置图像的 x 坐标位置。
y:在画布上放置图像的 y 坐标位置。
width:可选。要使用的图像的宽度。（伸展或缩小图像）
height:可选。要使用的图像的高度。（伸展或缩小图像）