Canvas 是一个 HTML5 元素，提供了一种在网页上绘制图形和动画效果的方法。它通过 JavaScript 脚本来操作像素级别的画布，可以实现各种视觉效果和互动体验。
本文将介绍如何使用 Canvas 绘制图形和实现动画效果，以及一些常用的绘制方法和属性。
创建 Canvas 元素
首先，在 HTML 文件中创建一个 Canvas 元素，并指定它的宽度和高度：
<canvas id="myCanvas" width="500" height="300"></canvas>
在 JavaScript 中，可以通过 getContext 方法获取 Canvas 绘图环境的上下文对象（通常是 2d）：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
绘制基本图形
Canvas 提供了一些基本的绘制方法，包括绘制直线、矩形、圆形和路径等。
绘制直线
使用 moveTo 和 lineTo 方法可以绘制直线：
ctx.moveTo(0, 0); // 设置起点坐标
ctx.lineTo(200, 100); // 设置终点坐标
ctx.stroke(); // 绘制直线
绘制矩形
使用 rect 方法可以绘制矩形：
ctx.rect(50, 50, 200, 100); // 设置矩形位置和尺寸
ctx.stroke(); // 绘制矩形边框
绘制圆形
使用 arc 方法可以绘制圆形：
ctx.arc(250, 150, 50, 0, 2 * Math.PI); // 设置圆形位置、半径和起始角度
ctx.stroke(); // 绘制圆形边框
绘制路径
使用 beginPath、moveTo、lineTo 和 closePath 方法可以绘制复杂的路径：
ctx.beginPath(); // 开始绘制路径
ctx.moveTo(50, 50); // 设置起点坐标
ctx.lineTo(200, 100); // 绘制线段
ctx.lineTo(150, 200);
ctx.closePath(); // 关闭路径
ctx.stroke(); // 绘制路径边框
使用样式和颜色
Canvas 提供了一些方法和属性来设置绘图的样式和颜色。
设置填充和描边颜色
可以使用 fillStyle 和 strokeStyle 属性来设置填充和描边的颜色：
ctx.fillStyle = '#FF0000'; // 设置填充颜色为红色
ctx.strokeStyle = '#00FF00'; // 设置描边颜色为绿色
设置线宽和线条样式
可以使用 lineWidth 和 lineCap 属性来设置线宽和线条样式：
ctx.lineWidth = 2; // 设置线宽为 2 像素
ctx.lineCap = 'round'; // 设置线条末端样式为圆形
设置阴影
可以使用 shadowColor、shadowOffsetX、shadowOffsetY 和 shadowBlur 属性来设置阴影效果：
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 设置阴影颜色为半透明黑色
ctx.shadowOffsetX = 2; // 设置阴影在 X 轴的偏移量为 2 像素
ctx.shadowOffsetY = 2; // 设置阴影在 Y 轴的偏移量为 2 像素
ctx.shadowBlur = 4; // 设置阴影的模糊度为 4 像素
绘制动画效果
Canvas 可以通过不断更新画布内容来创建动画效果。常见的方法是使用 requestAnimationFrame 函数来重绘画布。
下面是一个简单的例子，创建一个小球在画布中左右移动的动画效果：
let x = 0;
let direction = 1;
function drawBall() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
ctx.beginPath();
ctx.arc(x, canvas.height / 2, 20, 0, 2 * Math.PI);
ctx.fill();
if (x + 20 > canvas.width || x - 20 < 0) {
direction *= -1;
}
x += direction * 5;
requestAnimationFrame(drawBall);
}
drawBall();
在 drawBall 函数中，首先使用 clearRect 方法清空画布，然后绘制一个圆形小球。当小球到达画布边界时，改变其移动方向。最后使用 requestAnimationFrame 函数来请求浏览器重绘画布，从而实现动画效果。
以上就是使用 Canvas 绘制图形和动画效果的指南。通过灵活运用 Canvas 的绘图方法和属性，可以创造出丰富多样的视觉效果和互动体验。
本文来自极简博客，作者：技术趋势洞察，转载请注明原文链接：使用 Canvas 绘制图形和动画效果
