Canvas API是HTML5中的一个重要特性，它允许开发者在网页上直接绘制图形、图像、文本等内容，并且可以通过JavaScript进行控制和交互。在本文中，我们将介绍Canvas API的基础知识，包括如何创建Canvas元素、设置Canvas的属性、绘制基本形状和路径、以及使用图片和文字等高级功能。
创建Canvas元素和设置属性
首先，我们需要在HTML文档中添加一个Canvas元素，代码如下：
<canvas id="myCanvas"></canvas>
然后，在JavaScript中获取这个Canvas元素，并设置它的宽度、高度和样式等属性：
const canvas = document.getElementById('myCanvas');
canvas.width = 800;
canvas.height = 600;
canvas.style.backgroundColor = '#f0f0f0';
绘制基本形状和路径
Canvas API提供了一系列方法来绘制基本形状和路径，比如矩形、圆形、直线、曲线等。下面是几个例子：
const ctx = canvas.getContext('2d');
// 绘制矩形
ctx.fillRect(50, 50, 100, 100);
// 绘制圆形
ctx.beginPath();
ctx.arc(400, 300, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
// 绘制直线和曲线
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(400, 200);
ctx.quadraticCurveTo(500, 250, 400, 300);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();
使用图片和文字
除了基本形状和路径，Canvas API还支持在Canvas上绘制图片和文字。我们可以使用Image对象加载一张图片，然后在Canvas上绘制：
const img = new Image();
img.src = 'image.png';
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
同样地，我们也可以在Canvas上绘制文字：
ctx.font = 'bold 24px Arial';
ctx.fillStyle = 'green';
ctx.fillText('Hello World!', 500, 100);
实现交互式绘图和动画
最后，让我们来看一下如何利用Canvas API实现交互式绘图和动画。我们可以通过监听鼠标事件或键盘事件来改变Canvas的状态，并且使用requestAnimationFrame方法来进行动画渲染：
let x = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 100, 50, 50);
x += 5;
requestAnimationFrame(draw);
}
canvas.addEventListener('click', function() {
requestAnimationFrame(draw);
});
在上面的例子中，我们定义了一个draw函数，在每一帧中清空Canvas、绘制一个矩形并且移动它的位置。当用户点击Canvas时，我们使用requestAnimationFrame方法来启动动画。