HTML5 canvas 基础教程

HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。本基础教程由（英）Rob Hawkes撰写，旨在帮助初学者掌握Canvas的基本概念和实用技巧。 一、HTML5 Canvas概述 HTML5 Canvas是一个基于矢量图形的画布元素，通过JavaScript API来绘制和操作图像。这个API提供了大量的方法和属性，用于绘制直线、曲线、矩形、圆形、图像以及进行颜色处理和动画效果。 二、Canvas元素 在HTML中，使用`<canvas>`标签创建一个画布。可以为其设置宽高属性，如`width`和`height`，并可以通过ID选择器在JavaScript中引用它。 ```html <canvas id="myCanvas" width="500" height="500"></canvas> ``` 三、绘图上下文 每个`<canvas>`元素都有一个二维渲染上下文，可以通过`getContext()`方法获取，通常我们用`2d`表示二维渲染。 ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ``` 四、基本绘图 1. 直线：`moveTo()`和`lineTo()`方法用于绘制线条。 ```javascript ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); ``` 2. 曲线：`quadraticCurveTo()`和`bezierCurveTo()`用于绘制二次和三次贝塞尔曲线。 3. 圆形：`arc()`方法绘制圆或弧线。 ```javascript ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); ctx.stroke(); ``` 4. 填充和描边：`fill()`用于填充形状，`stroke()`用于描边。 五、颜色与样式 1. 颜色：`fillStyle`和`strokeStyle`属性设置填充和描边颜色。 ```javascript ctx.fillStyle = 'rgb(255,0,0)'; ctx.strokeStyle = 'blue'; ``` 2. 线宽：` lineWidth`属性设置线条宽度。 3. 渐变与模式：可以创建线性渐变或径向渐变，并作为`fillStyle`或`strokeStyle`。 六、文本绘制 `fillText()`和`strokeText()`用于在画布上绘制文本，`font`属性设置字体样式，`textAlign`和`textBaseline`控制对齐方式。 ```javascript ctx.font = '30px Arial'; ctx.fillText('Hello, World!', x, y); ``` 七、图片绘制 `drawImage()`方法可以将图像（包括SVG和PNG等）绘制到画布上。 ```javascript var img = new Image(); img.src = 'image.png'; img.onload = function() { ctx.drawImage(img, x, y, width, height); }; ``` 八、裁剪与保存状态 1. 裁剪：`clip()`方法定义一个剪切区域，后续绘制只在该区域内可见。 2. 保存与恢复状态：`save()`和`restore()`用于保存和恢复绘图状态，如变换、颜色和填充规则。 九、动画 通过定时器（如`requestAnimationFrame()`）实现连续绘制，更新画布内容，实现动画效果。 十、事件处理 虽然Canvas本身不支持事件监听，但可以通过检测鼠标或触摸在画布上的位置来模拟事件处理。 HTML5 Canvas提供了一个强大的平台，让开发者能够创建复杂的Web图形和交互式应用。通过学习和实践，你可以利用它来构建各种创新的Web项目，如游戏、数据可视化、图表绘制等。这个基础教程将引导你逐步掌握Canvas的各个方面，为你的Web开发技能添加新的维度。