B站Video - GAMES101-现代计算机图形学入门-闫令琪 (opens new window)
跨平台Web Canvas渲染引擎架构的设计与思考(内含实现方案) (opens new window)
# Canvas基础知识
const canvas = document.getElementById("canvas");
canvas.width = 1024;
canvas.height = 768;
const context = canvas.getContext("2d");
1
2
3
4
5
6
2
3
4
5
6
# 绘制直线
moveTo与lineTo是状态设置，stroke是最终来画
- moveTo 是起始点
- lineTo 是线段位置
context.moveTo(100,100)
context.lineTo(700,700)
context.lineWith = 5
context.strokeStyle = "#000000"
context.stroke()
1
2
3
4
5
6
2
3
4
5
6
# fill 着色
context.fillStyle = "#000000"
context.fill()
1
2
2
# 绘制弧线
centerx centery radius 圆心坐标 x、y，半径
startingAngle, endingAngle 起始角度、结束角度
anticlockwise 顺时针还是逆时针
context.arc(
centerx, centery, radius,
startingAngle, endingAngle,
anticlockwise = false
)
1
2
3
4
5
2
3
4
5
# 封闭路径
beginPath 开始路径，重新规划路径
closePath 结束路径，结束当前路径
context.beginPath()
context.closePath()
1
2
2
# canvas 绘图
Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多种方式在Canvas上绘制图像。
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
1
image 是我们所需要绘制到canvas 图像的文件。HTMLImageElement、HTMLCanvasElement、SVGImageElement 这三个是我们平时所使用最多的
sx, sy, sWidth, sHeight 是原图片绘制中进行裁剪使用
dx, dy, dWidth, dHeight 是控制图片在canvas
image 绘制方式一般是等待image onload再去绘制
const img = new Image()
img.src = "https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg"
img.onload = () => {
// 执行绘制
ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
}
1
2
3
4
5
6
2
3
4
5
6