HTML5 Canvas-猿码集

1. 什么是HTML5 Canvas？

HTML5 Canvas是HTML5新增的绘图标签，它可以实现在网页上绘制图形、图像和动画等。Canvas本身提供的绘图功能是非常基础的，但是通过JavaScript，我们可以为Canvas添加更多的绘图功能。

1.1 Canvas与SVG的区别

Canvas和SVG都可以创建图形，但它们的原理不同。SVG是一个基于XML的标记语言，它使用XML描述图形对象，而Canvas则是一个基于JavaScript API的位图绘制技术。

Canvas的优点是可以绘制复杂的图形和动画，绘图效率高，适用于处理像素级别的图形。而SVG则更适合于基于矢量的图形处理，因为它支持缩放而不失去清晰度，适用于制作需要高清晰度的复杂图形和动画。

2. Canvas的使用

Canvas的使用需要在HTML文件中引入Canvas元素，在JavaScript中通过Canvas的上下文对象来实现绘图操作。通过设置Canvas的属性和方法，我们可以绘制出不同形状的图形。


<canvas id="myCanvas" width="500" height="500"></canvas>

在JavaScript中获取Canvas对象，并获取上下文对象：


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

2.1 绘制矩形

下面的代码演示了如何在Canvas中绘制一个矩形：


context.fillStyle = "#FF0000";
context.fillRect(0, 0, 150, 75);

fillStyle属性用于设置填充颜色，fillRect方法用于绘制一个矩形，并填充颜色。

2.2 绘制文本

下面的代码演示了如何在Canvas中绘制文本：


context.font = "30px Arial";
context.fillText("Hello World", 10, 50);

font属性用于设置字体和字号，fillText方法用于绘制文本。

2.3 绘制路径

通过设置连续的点，我们可以绘制一条路径。路径可以用来绘制不同形状的图形，例如线段、曲线、多边形等。

下面的代码演示了如何通过绘制路径来绘制一个三角形：


context.beginPath();
context.moveTo(75, 50);
context.lineTo(100, 75);
context.lineTo(100, 25);
context.fill();

beginPath方法用于启动路径，moveTo方法用于设置路径的起始点，lineTo方法用于设置路径的终点，fill方法用于填充路径。

3. Canvas的动画

Canvas的动画通过不断的更新Canvas上下文中的内容实现。下面的代码演示了如何使用Canvas的动画效果。


var x = 150;
var y = 150;
var dx = 2;
var dy = 2;
function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.arc(x, y, 50, 0, Math.PI * 2);
    context.fillStyle = "#0095DD";
    context.fill();
    x += dx;
    y += dy;
    if (x + dx > canvas.width - 50 || x + dx < 50) {
        dx = -dx;
    }
    if (y + dy > canvas.height - 50 || y + dy < 50) {
        dy = -dy;
    }
}
setInterval(draw, 10);

上述代码通过设置圆形的坐标值和移动步长，以及判断边缘位置，实现了一个圆形在Canvas中的动画效果。

4. Canvas的应用实例

Canvas的应用非常广泛，下面介绍几个常用的实例：

4.1 点击拖拽

通过Canvas实现点击拖拽可以模拟点击图标后的拖拽效果。

下面的代码演示了如何通过Canvas实现点击拖拽效果：


var imageObj = new Image();
imageObj.onload = function () {
    context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'image.png';
var dragging = false;
var dragStartLocation;
var snapshot;
canvas.addEventListener('mousedown', dragStart, false);
canvas.addEventListener('mousemove', drag, false);
canvas.addEventListener('mouseup', dragStop, false);
function getCanvasCoordinates(event) {
    var x = event.clientX - canvas.getBoundingClientRect().left;
    var y = event.clientY - canvas.getBoundingClientRect().top;
    return { x: x, y: y };
}
function takeSnapshot() {
    snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
}
function restoreSnapshot() {
    context.putImageData(snapshot, 0, 0);
}
function dragStart(event) {
    dragging = true;
    dragStartLocation = getCanvasCoordinates(event);
    takeSnapshot();
}
function drag(event) {
    var position;
    if (dragging === true) {
        restoreSnapshot();
        position = getCanvasCoordinates(event);
        context.drawImage(imageObj, position.x - 20, position.y - 20, 40, 40);
    }
}
function dragStop(event) {
    dragging = false;
    restoreSnapshot();
}

上述代码中，首先需要通过JavaScript读取并渲染图像，然后通过鼠标事件实现拖拽的效果。

4.2 绘制图表

通过Canvas实现绘制图表可以展示数据的可视化，更直观的展示数据的变化。

下面的代码演示了如何通过Canvas绘制图表效果：


var data = [25, 45, 60, 75, 95, 80, 60, 45, 30, 10];
for (var i = 0; i < data.length; i++) {
    context.fillStyle = "#0095DD";
    context.fillRect(i * 50, canvas.height - data[i], 40, data[i]);
    context.fillStyle = "#FF0000";
    context.fillText(data[i], i * 50 + 15, canvas.height - data[i] - 10);
}

上述代码通过遍历数据，绘制不同高度的矩形图，并在每个矩形上添加文字展示数据。

4.3 游戏开发

通过Canvas实现游戏开发可以在网页中实现简单的游戏，增加网页的趣味性。

下面的示例代码展示了在Canvas中创建游戏的方法：


function Ball(x, y, dx, dy, radius) {
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = radius;
    this.draw = function () {
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        context.fillStyle = "#0095DD";
        context.fill();
        context.closePath();
    }
    this.move = function () {
        if (this.x + this.dx > canvas.width - this.radius || this.x + this.dx < this.radius) {
            this.dx = -this.dx;
        }
        if (this.y + this.dy > canvas.height - this.radius || this.y + this.dy < this.radius) {
            this.dy = -this.dy;
        }
        this.x += this.dx;
        this.y += this.dy;
    }
}
var ball = new Ball(50, 50, 3, 3, 30);
function animate() {
    requestAnimationFrame(animate);
    context.clearRect(0, 0, canvas.width, canvas.height);
    ball.draw();
    ball.move();
}
animate();

上述代码中，通过创建Ball类来设置球的大小，速度和位置，并通过requestAnimationFrame方法来实现动画效果。

5. 总结

HTML5 Canvas是一种强大的绘图工具，可以用于实现各种不同的图形、图像和动画效果。通过JavaScript对Canvas上下文进行控制，可以实现更多的绘图功能，并为我们的网页增加更多的趣味性。

除了上述介绍的内容，Canvas还包括图片处理、像素操作等高级功能，详情可以参考相关文档。

HTML5 Canvas