canvas(画布):顾名思义用来画画的容器
1. 点
context.moveTo(x,y)
。这句代码的意思是 移动画笔至(x,y)这个点(单位是px)。这里是以 canvas 画布的左上角为笛卡尔坐标系的原点,且y轴的正方向向下,x轴的正方向向右。
2. 线
-
起点:
context.moveTo(x,y)
:同点 -
终点:
context.lineTo(x,y)
。这句的意思是从 上一笔的停止点 绘制到(x,y)这里。 这里我们只是定义了路径,而未真正开始绘制。折线继续lineTo
就可以了。
3. 面
面其实就是把折线内容闭合就可以形成多边形了,因此只要在绘制后通过 closePath()
就可以将内容闭合了。下面是一个矩形的例子(里面包含了常用的一些属性):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>绘制矩形</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" width=800 height="600" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的浏览器居然不支持Canvas
</canvas>
</div>
<script>
window.onload = function () {
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
// 添加渐变线 (与PS的渐变线是一样的)
const grd = context.createLinearGradient(400, 50, 400, 550);
// 径向渐变 (两圆之间的渐变)
// const grd = context.createRadialGradient(400, 300, 0, 400, 300, 250);
// 填充纹理 repeat-x | -y | no-repeat
// const pattern = context.createPattern(img,"repeat");
//添加颜色断点
grd.addColorStop(0, "#94e6ff");
grd.addColorStop(0.5, "white");
grd.addColorStop(1, "#94e6ff");
context.beginPath();
context.moveTo(150, 50);
context.lineTo(650, 50);
context.lineTo(650, 550);
context.lineTo(150, 550);
context.closePath(); // 闭合路径
context.lineWidth = 2; // 设置线宽
context.strokeStyle = "black"; // 设置线色
context.fillStyle = grd; // 选择油漆桶的颜色 当然也可以是具体的纯色
context.fill() // 绘制路径方法
context.stroke();
}
</script>
</body>
</html>
4. 圆弧
-
标准圆弧:
arc()
参数:(x, y, radius, startAngle,endAngle,anticlockwise)
前面三个参数,分别是圆心坐标与圆半径。
startAngle、endAngle 是弧度值,不是角度值。
anticlockwise:是否逆时针绘制 默认false(顺时针) -
复杂圆弧:
arcTo()
参数:(x1,y1,x2,y2,radius)
两个切点家圆弧半径确定 -
二次贝塞尔曲线:
quadraticCurveTo()
参数:(cpx,cpy,x,y)
这里经常配合moveTo(x0, y0)
给出起始切点 cpx, cpy 作为控制点
x, y 为结束点
这里有一个 在线转换器 -
三次贝塞尔曲线:
bezierCurveTo()
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
较二次曲线多了一个控制点,正常情况下二次已经足够了,三次能画出更加复杂的东西。
在线转换器
5.变换
-
平移变换
translate(x,y)
例如我想将位于(0,0)的矩形平移至(100,100)点。那么我只要在绘制矩形之前加上context.translate(100,100) -
旋转变换
rotate(deg)
需要注意的是,旋转是以坐标系的原点(0,0)为圆心进行的顺时针旋转。所以,在使用rotate()
之前,需要配合使用translate()
平移坐标系,确定旋转的圆心。 -
缩放变换
scale(sx,sy)
注意:这个缩放是整体缩放 包括了位置 和 线宽, 所以我们最好是把左上角位置为(0, 0),不设置线宽。或者自己封装。 -
矩阵变换
transform(a,b,c,d,e,f)
以上变换都可以用矩阵变换去实现,
[a, c, e]
|b, d, f|
[0, 0, 1]参数 含义 默认值 a 水平缩放 1 b 水平倾斜 0 c 垂直倾斜 0 d 垂直缩放 1 e 水平位移 0 f 垂直位移 0 默认值带入后其实就是一个单位矩阵
可以经过简单的矩阵换算得出以下结论- 使用context.transform (1,0,0,1,dx,dy)代替context.translate(dx,dy)
- 使用context.transform(sx,0,0,sy,0,0)代替context.scale(sx, sy)
- 使用context.transform(0,b,c,0,0,0)来实现倾斜效果(最实用)。
-
setTransform()
是重置并开始变换,相当于做了一次restore
6.文本
其他
- canvas 内容说多也不多,其他还有
shadow
相关 以及clip
相关等API - 最后附上游戏链接 2048游戏(ps:最近比较忙 分值以及动效等会补上~ 个人觉得就2048而言操作div会更加简单哦)