HTML5 Canvas绘制图形从入门到精通

HTML5 Canvas是一种强大的绘图技术，可以在网页上创建各种各样的图形和动画。本攻略将从入门开始，逐步学习如何使用Canvas绘制常见的图形和实现动画效果。

简介

HTML5 Canvas是基于JavaScript的2D绘图API，可以在网页上直接绘制图形，比如线条、矩形、圆等。相比之前的绘图技术，如基于Flash的绘图，基于Canvas的绘图有很多优势，包括：

1. 简单易用：只需要在HTML中添加一个Canvas元素，就可以使用JavaScript绘制各种图形。
2. 执行效率高：Canvas利用了现代浏览器的硬件加速，绘图速度非常快。
3. 兼容性好：Canvas是HTML5标准的一部分，支持大多数现代浏览器。（IE10以下不支持）

开始

创建Canvas元素

在HTML页面中，可以使用<canvas>元素来创建Canvas元素。

<canvas id="myCanvas" width="400" height="300"></canvas>

该元素有三个属性：

1. id属性：指定Canvas元素的唯一标识符。
2. width属性：指定Canvas元素的宽度。
3. height属性：指定Canvas元素的高度。

获取Canvas上下文

为了在Canvas上绘制图形，需要获取Canvas的上下文。Canvas上下文是一组绘制方法的集合，可用于在Canvas上绘制形状、图像、文本等。

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

绘制线条

使用moveTo方法和lineTo方法可以绘制一条线。

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 150);
ctx.stroke();

以上代码表示在Canvas上绘制了一条起点为(50,50)，终点为(150,150)的直线。

绘制矩形

使用rect方法可以绘制一个矩形。

ctx.beginPath();
ctx.rect(50, 50, 100, 100);
ctx.stroke();

以上代码表示在Canvas上绘制一个起点为(50,50)，宽度为100，高度为100的矩形。

绘制圆形

使用arc方法可以绘制一个圆形。

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2*Math.PI);
ctx.stroke();

以上代码表示在Canvas上绘制一个中心为(100,100)，半径为50的圆形。

示例

示例一：在Canvas上绘制五角星

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

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

ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(140, 90);
ctx.lineTo(220, 90);
ctx.lineTo(160, 150);
ctx.lineTo(180, 240);
ctx.lineTo(100, 190);
ctx.lineTo(20, 240);
ctx.lineTo(40, 150);
ctx.lineTo(-20, 90);
ctx.lineTo(60, 90);
ctx.closePath();
ctx.stroke();

以上代码表示在Canvas上绘制了一个五角星。

示例二：动态绘制圆形

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

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var r = 10, x = 100, y = 100;
var direction = 1;

setInterval(function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2*Math.PI);
  ctx.stroke();

  if (r >= 100 || r <= 10) {
    direction = -direction;
  }
  r += direction * 5;
}, 50);

以上代码表示在Canvas上绘制了一个动态的圆形，圆形半径在10～100之间循环变化。

总结

本攻略简单介绍了HTML5 Canvas绘制图形的入门知识和常见API的使用方法，并提供了两个示例。使用Canvas可以实现丰富的图形和动画效果，是开发前端应用的重要技术之一。