HTML Canvas基础教程

HTML Canvas是HTML5的一部分，它提供了一个通过JavaScript和CSS在网页上绘制图形的API，Canvas API允许开发者直接在网页上绘制2D图形，包括线条、形状、图像等，这使得开发者可以在不依赖第三方库的情况下，实现复杂的视觉效果。

HTML Canvas的基本使用

我们需要在HTML中创建一个canvas元素。

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

我们需要在JavaScript中获取这个canvas元素的引用，并创建一个2D渲染上下文：

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

绘制基本图形

在获取了2D渲染上下文之后，我们就可以开始绘制图形了，以下是一些基本的绘图操作：

1、绘制矩形：

context.fillRect(20, 20, 150, 100);

2、绘制圆形：

context.beginPath();
context.arc(100, 75, 50, 0, 2 * Math.PI);
context.fill();

3、绘制线段：

context.moveTo(0, 0);
context.lineTo(200, 100);
context.stroke();

绘制文本

Canvas API也提供了绘制文本的功能：

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

保存和加载图像

Canvas API还提供了保存和加载图像的功能：

var imageObj = new Image();
imageObj.onload = function() {
    context.drawImage(imageObj, 10, 10);
};
imageObj.src = 'img_girl.png'; //替换为你的图像路径

动画和交互

Canvas API还支持动画和交互，我们可以使用requestAnimationFrame函数来创建动画：

function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height); //清除画布
    //在这里添加你的绘图代码...
    requestAnimationFrame(draw); //递归调用，创建动画效果
}
draw(); //开始动画

我们还可以使用addEventListener函数来监听鼠标事件，实现交互效果：

canvas.addEventListener('mousedown', function(e) {
    var x = e.clientX - canvas.offsetLeft; //获取鼠标位置的x坐标
    var y = e.clientY - canvas.offsetTop; //获取鼠标位置的y坐标
    //在这里添加你的交互代码...
});

HTML Canvas是一个非常强大的工具，它使得开发者可以在网页上直接绘制图形，而无需依赖第三方库，虽然它的学习曲线可能比一些简单的图形库要陡峭一些，但是一旦掌握了它，你将能够实现非常复杂和强大的视觉效果。