HTML5 Canvas 知识点汇总
编程小白也能看懂的Canvas详解
📌
Canvas基础知识
什么是Canvas？
<canvas> 是HTML5新增的元素，它就像一个空白的画布，你可以使用JavaScript在上面绘制图形、动画等。
创建Canvas画布
在HTML中添加一个canvas标签：
<canvas id=”myCanvas” width=”500″ height=”300″>
您的浏览器不支持Canvas
</canvas>
您的浏览器不支持Canvas
</canvas>
设置width和height属性指定画布大小，不支持Canvas的浏览器会显示标签内的文本。
获取绘图上下文
Canvas本身没有绘图能力，需要通过JavaScript获取”绘图上下文”进行操作：
// 获取Canvas元素
const canvas = document.getElementById(‘myCanvas’);
// 获取2D绘图上下文
const ctx = canvas.getContext(‘2d’);
const canvas = document.getElementById(‘myCanvas’);
// 获取2D绘图上下文
const ctx = canvas.getContext(‘2d’);
所有绘图操作都是通过ctx对象完成的。
🔷
绘制基本形状
绘制矩形
Canvas提供了三种绘制矩形的方法：
// 填充矩形（实心的）
ctx.fillRect(x, y, width, height);
// 描边矩形（空心的）
ctx.strokeRect(x, y, width, height);
// 清除矩形区域
ctx.clearRect(x, y, width, height);
ctx.fillRect(x, y, width, height);
// 描边矩形（空心的）
ctx.strokeRect(x, y, width, height);
// 清除矩形区域
ctx.clearRect(x, y, width, height);
绘制路径
路径用于绘制复杂的形状：
// 开始新路径
ctx.beginPath();
// 移动到起点
ctx.moveTo(50, 50);
// 画线到指定点
ctx.lineTo(200, 50);
// 画线到另一个点
ctx.lineTo(200, 150);
// 闭合路径（回到起点）
ctx.closePath();
// 描边路径
ctx.stroke();
// 或填充路径
// ctx.fill();
ctx.beginPath();
// 移动到起点
ctx.moveTo(50, 50);
// 画线到指定点
ctx.lineTo(200, 50);
// 画线到另一个点
ctx.lineTo(200, 150);
// 闭合路径（回到起点）
ctx.closePath();
// 描边路径
ctx.stroke();
// 或填充路径
// ctx.fill();
绘制圆形/圆弧
ctx.beginPath();
// arc(x, y, 半径, 起始角度, 结束角度, 逆时针?)
ctx.arc(150, 100, 50, 0, Math.PI * 2);
ctx.stroke();
// arc(x, y, 半径, 起始角度, 结束角度, 逆时针?)
ctx.arc(150, 100, 50, 0, Math.PI * 2);
ctx.stroke();
提示： 角度使用弧度制，Math.PI表示180度。
🎨
样式与颜色
颜色设置
// 填充颜色
ctx.fillStyle = ‘#FF5733’; // 颜色值
ctx.fillStyle = ‘rgb(255, 87, 51)’; // RGB格式
ctx.fillStyle = ‘rgba(255, 87, 51, 0.7)’; // 带透明度
// 描边颜色
ctx.strokeStyle = ‘blue’;
// 线条宽度
ctx.lineWidth = 5;
ctx.fillStyle = ‘#FF5733’; // 颜色值
ctx.fillStyle = ‘rgb(255, 87, 51)’; // RGB格式
ctx.fillStyle = ‘rgba(255, 87, 51, 0.7)’; // 带透明度
// 描边颜色
ctx.strokeStyle = ‘blue’;
// 线条宽度
ctx.lineWidth = 5;
渐变效果
// 创建线性渐变
const gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0, ‘red’);
gradient.addColorStop(0.5, ‘yellow’);
gradient.addColorStop(1, ‘green’);
// 应用渐变
ctx.fillStyle = gradient;
ctx.fillRect(10,10,200,100);
const gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0, ‘red’);
gradient.addColorStop(0.5, ‘yellow’);
gradient.addColorStop(1, ‘green’);
// 应用渐变
ctx.fillStyle = gradient;
ctx.fillRect(10,10,200,100);
阴影效果
ctx.shadowColor = ‘rgba(0,0,0,0.5)’; // 阴影颜色
ctx.shadowBlur = 10; // 模糊程度
ctx.shadowOffsetX = 5; // X方向偏移
ctx.shadowOffsetY = 5; // Y方向偏移
// 绘制带阴影的图形…
ctx.shadowBlur = 10; // 模糊程度
ctx.shadowOffsetX = 5; // X方向偏移
ctx.shadowOffsetY = 5; // Y方向偏移
// 绘制带阴影的图形…
✨
文本与图像
绘制文本
// 字体设置（与CSS字体相同）
ctx.font = ‘bold 30px Arial’;
// 文本对齐方式
ctx.textAlign = ‘center’; // left, right, center
ctx.textBaseline = ‘middle’; // top, hanging, middle, alphabetic, ideographic, bottom
// 填充文本
ctx.fillText(‘Hello Canvas!’, 150, 50);
// 描边文本
ctx.strokeText(‘Outline Text’, 150, 100);
ctx.font = ‘bold 30px Arial’;
// 文本对齐方式
ctx.textAlign = ‘center’; // left, right, center
ctx.textBaseline = ‘middle’; // top, hanging, middle, alphabetic, ideographic, bottom
// 填充文本
ctx.fillText(‘Hello Canvas!’, 150, 50);
// 描边文本
ctx.strokeText(‘Outline Text’, 150, 100);
绘制图像
可以在Canvas上绘制图片：
const img = new Image();
img.src = ‘myImage.png’;
img.onload = function() {
// 在(50,50)位置绘制原始尺寸图片
ctx.drawImage(img, 50, 50);
// 缩放绘制
ctx.drawImage(img, 200, 50, 100, 100);
// 切片绘制
// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
ctx.drawImage(img, 10, 10, 100, 100, 300, 50, 150, 150);
};
img.src = ‘myImage.png’;
img.onload = function() {
// 在(50,50)位置绘制原始尺寸图片
ctx.drawImage(img, 50, 50);
// 缩放绘制
ctx.drawImage(img, 200, 50, 100, 100);
// 切片绘制
// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
ctx.drawImage(img, 10, 10, 100, 100, 300, 50, 150, 150);
};
🔄
变形与状态
平移、旋转与缩放
// 保存当前状态
ctx.save();
// 平移坐标系
ctx.translate(100, 50);
// 旋转（弧度制）
ctx.rotate(Math.PI / 4); // 旋转45度
// 缩放
ctx.scale(1.5, 1.5);
// 绘制图形（在变形后的坐标系中）
ctx.fillRect(0, 0, 50, 50);
// 恢复之前保存的状态
ctx.restore();
ctx.save();
// 平移坐标系
ctx.translate(100, 50);
// 旋转（弧度制）
ctx.rotate(Math.PI / 4); // 旋转45度
// 缩放
ctx.scale(1.5, 1.5);
// 绘制图形（在变形后的坐标系中）
ctx.fillRect(0, 0, 50, 50);
// 恢复之前保存的状态
ctx.restore();
重要： 使用save()和restore()保存和恢复状态，避免变形影响后续绘图。
创建动画
Canvas动画的基本原理：
function draw() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新位置/状态
x += speed;
// 绘制图形
ctx.fillRect(x, y, 50, 50);
// 递归调用
requestAnimationFrame(draw);
}
// 启动动画
draw();
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新位置/状态
x += speed;
// 绘制图形
ctx.fillRect(x, y, 50, 50);
// 递归调用
requestAnimationFrame(draw);
}
// 启动动画
draw();