canvas

引言

Canvas 是 HTML5 中新增的一个元素，用于在网页上绘制图形。它提供了一种在网页上进行绘图、动画制作以及交互式绘图等功能的强大手段。本文将详细介绍 Canvas 的基本用法、绘图功能以及一些高级应用。

Canvas 基础

创建 Canvas 元素

在 HTML 中，使用 <canvas> 标签来创建一个画布。以下是一个简单的例子：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

在上面的代码中，我们创建了一个宽 200 像素，高 100 像素的画布，并且为它添加了一个黑色边框。

获取 Canvas 对象

要操作 Canvas，首先需要获取它的对象。这可以通过 JavaScript 中的 getElementById 方法实现：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

这里，ctx 是 Canvas 的 2D 上下文，用于绘制图形。

基本绘图操作

绘制矩形

使用 fillRect(x, y, width, height) 和 strokeRect(x, y, width, height) 方法可以绘制矩形。以下是一个例子：

ctx.fillRect(10, 10, 50, 50); // 填充矩形
ctx.strokeRect(10, 10, 50, 50); // 矩形轮廓

绘制圆形

使用 arc(x, y, radius, startAngle, endAngle, counterclockwise) 方法可以绘制圆形。以下是一个例子：

ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI*2, true); // 参数依次为：圆心 x, y, 半径, 起始角度，结束角度，顺时针或逆时针
ctx.fillStyle = "#333";
ctx.fill();

绘制文本

使用 fillText(text, x, y) 和 strokeText(text, x, y) 方法可以绘制文本。以下是一个例子：

ctx.font = "30px Arial";
ctx.fillText("Hello, world!", 10, 50);

高级应用

动画

使用 requestAnimationFrame 方法可以实现 Canvas 动画。以下是一个简单的例子：

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(100, 100, 10, 0, Math.PI*2, true);
    ctx.fillStyle = "#f00";
    ctx.fill();
}

requestAnimationFrame(draw);

交互

Canvas 支持鼠标和触摸事件。以下是一个简单的例子：

canvas.addEventListener('mousemove', function(e) {
    var rect = canvas.getBoundingClientRect();
    ctx.beginPath();
    ctx.arc(e.clientX - rect.left, e.clientY - rect.top, 10, 0, Math.PI*2, true);
    ctx.fillStyle = "#f00";
    ctx.fill();
});

总结

Canvas 是 HTML5 中一个非常强大的元素，它可以用于绘制图形、动画制作以及交互式绘图等。通过本文的介绍，相信你已经对 Canvas 有了一定的了解。在实际应用中，你可以根据自己的需求，灵活运用 Canvas 的各种功能，创造出丰富多彩的网页效果。