HTML5 画布canvas 触摸绘图
HTML5 最伟大的特性之一便是引入了画布 Canvas。Canvas 元素专为客户端点阵图形设计，其自身并无绘图能力，而是向客户端 JavaScript 提供了一个绘图 API，使得脚本能够将各种图形绘制在画布上。本文将通过示例详细介绍 canvas 的绘图功能。
canvas 绘图基础
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。需要注意的是，我们并非直接用鼠标在 Canvas 区域中绘图。实际上，Canvas 元素只是一块无色透明的区域，类似于一个只有宽度和高度而没有背景的 DIV，必须使用 JavaScript 脚本进行绘图操作。
示例一：绘制方形
首先，在页面上创建一个 canvas 元素，并指定其 id、宽度和高度：
<canvas id="square" width="200" height="100">
your browser does not support the canvas tag
</canvas>
由于 Canvas 元素本身没有绘图能力，所有的绘制工作都要使用 JavaScript 完成：
var c = document.getElementById("square");
var cxt = c.getContext("2d");
cxt.fillStyle = "#ff0000";
cxt.fillRect(0, 0, 150, 75);
上述代码中，通过 document.getElementById("square") 获取 canvas 元素，再使用 c.getContext("2d") 获取 2D 绘图对象。接着，使用 fillStyle 方法将填充颜色设置为红色，fillRect 方法用于规定形状、位置和尺寸，最终绘制出一个红色的方形。
示例二：绘制线条
我们可以通过指定起始坐标和结束坐标来绘制一条直线：
var line = document.getElementById('line');
var c = line.getContext('2d');
c.moveTo(20, 20);
c.lineTo(200, 100);
c.lineTo(20, 100);
c.stroke();
下面是相关方法的详细解释：
moveTo(x, y)：设置绘图的起始坐标。lineTo(x, y)：从上一个起点到(x, y)的点绘制线条，上一个起点可通过moveTo方法指定，若未指定则默认为原先路径的终点。stroke()：对路径进行描边操作。
示例三：绘制圆形
通过规定尺寸、颜色和位置，我们可以绘制一个圆形：
var c = document.getElementById('circle');
var r = c.getContext('2d');
r.fillStyle = '#ff0000';
r.beginPath();
r.arc(70, 80, 45, 0, Math.PI * 2, true);
r.closePath();
r.fill();
相关方法解释如下：
beginPath()：创建路径的第一步，调用该方法会返回一个存储路径信息的对象。closePath()：将当前点与起始点连接，闭合路径。arc(x, y, radius, startAngle, endAngle, anticlockwise)：(x, y)为圆弧的圆心坐标，radius是半径，startAngle和endAngle分别是圆弧的开始和结束弧度（弧度与角度的转换公式为radians = (Math.PI / 180) * degree），anticlockwise为true时表示逆时针绘制，否则为顺时针。fillStyle：用于设置填充颜色。fill()：对路径进行填充操作。
示例四：制作动画
我们可以利用 JavaScript 动态地在画布上绘制图像，从而产生动画效果：
var x = 0;
var y = 0;
var ctx = document.getElementById("animate").getContext("2d");
setInterval(function () {
ctx.clearRect(0, 0, 600, 600);
ctx.fillStyle = "#fc0";
ctx.beginPath();
ctx.arc(x++, y++, 15, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}, 10);
在上述代码中，使用 setInterval() 方法定时运行（每隔 10 毫秒运行一次）。在画布中绘制一个黄色的圆形，并且在每次绘制前使用 clearRect() 方法清除上次绘制的圆形，这样就会呈现出一个从画布左上角到右下角运动的小球的简单动画。
canvas 其他功能
Canvas 还具备加载图像、绘制颜色渐变的图案以及产生阴影效果等功能。本站 helloweba 将会有更多关于 canvas 效果方面的详细讲解。Canvas 是一个非常轻便的标签，借助 JavaScript 脚本的支持，它能实现几乎所有你能想到的炫酷效果，绝对会让你感到惊艳。