HTML5的canvas元素使用JavaScript在网页上绘制图像。canvas拥有多种绘制、椭圆、圆形、字符以及添加方法的。这里使用canvas元素实现的图标演示程序（源代码）
<!DOCTYPE html>
<html>
<头>
<meta http-equiv="Content-type" content="text/html; charset=gbk" />
<title>HTML5 控制器-weisico.com</title>
</头>
<身体>
<中心>
<div><a href="http://www.weisico.com" target="_blank">weisico.com</a> <a href="http://www.weisico.com/tech/254。 html" target="_blank">查看原文</a>
<h1>HTML5 目录</h1>
<canvas id="canvas" width="200" height="200" style="border:1px solid #000;">weisico.com 提示您，请使用支持HTML5的浏览器，例如Chrome,IE9,IE10,火狐等。 </canvas>
</div>
<script type="text/javascript" language="javascript" charset="gbk">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
如果（ctx）{
var timerId;
var frameRate = 60;
函数 canvObject() {
这个.x = 0;
this.y = 0;
this.rotation = 0;
this.borderWidth = 2;
this.borderColor = '#000000';
this.fill = false;
this.fillColor = '#ff0000';
this.update = 函数 () {
if (!this.ctx) throw new Error('weisico.com提示：您没有指定ctx对象。');
var ctx = this.ctx
ctx.save();
ctx.lineWidth = this.borderWidth;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.fillColor;
ctx.translate(this.x, this.y);
if (this.rotation) ctx.rotate(this.rotation * Math.PI / 180);
如果 (this.draw) this.draw(ctx);
如果 (this.fill) ctx.fill();
ctx.stroke();
ctx.restore();
}
};
功能线（）{};
Line.prototype = new canvObject();
Line.prototype.fill = false;
Line.prototype.start = [0, 0];
Line.prototype.end = [5, 5];
Line.prototype.draw = 函数（ctx）{
ctx.beginPath();
ctx.moveTo.apply(ctx, this.start);
ctx.lineTo.apply(ctx, this.end);
ctx.closePath();
};
功能圆（）{};
Circle.prototype = new canvObject();
Circle.prototype.draw = 函数（ctx）{
ctx.beginPath();
ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);
ctx.closePath();
};
var circle = new Circle();
圆.ctx = ctx;
圆.x = 100;
圆.y = 100;
circle.radius = 90;
circle.fill = true;
circle.borderWidth = 6;
circle.fillColor = '#ffffff';
var hour = new Line();
小时.ctx = ctx;
小时.x = 100;
小时.y = 100;
hour.borderColor = "#000000";
小时.borderWidth = 10;
小时.旋转 = 0;
小时.开始 = [0, 20];
小时.结束 = [0, -50];
var 分钟 = 新行（）；
分钟.ctx = ctx;
分钟.x = 100;
分钟.y = 100;
min.borderColor = "#333333";
分钟.borderWidth = 7;
分钟.旋转 = 0;
分钟.开始 = [0, 20];
分钟.end = [0, -70];
var seconds = new Line();
秒.ctx = ctx;
秒.x = 100;
秒.y = 100;
seconds.borderColor = "#ff0000";
秒.borderWidth = 4;
秒.旋转 = 0;
seconds.start = [0, 20];
seconds.end = [0, -80];
var center = new Circle();
中心.ctx = ctx;
中心.x = 100;
中心.y = 100;
center.radius = 5;
center.fill = true;
center.borderColor = '橙色';
for (var i = 0, ls = [], 缓存; i < 12; i++) {
缓存 = ls[i] = 新行（）；
缓存.ctx = ctx;
缓存.x = 100;
缓存.y = 100;
cache.borderColor = "pink";//月色
cache.borderWidth = 2;
cache.rotation = i * 30;
cache.start = [0, -70];
cache.end = [0, -80];
}
timerId = setInterval（函数（）{
// 清除画布
ctx.clearRect(0, 0, 200, 200);
// 填充背景色
ctx.fillStyle = '粉红色';
ctx.fillRect(0, 0, 200, 200);
// 包
圈。更新（）；
// 月月
for (var i = 0; cache = ls[i++]; ) cache.update();
// 时针
hour.rotation = (new Date()).getHours() * 30;
小时.更新（）；
// 分针
分钟.旋转 = (新日期()).getMinutes() * 6;
分钟.更新（）；
//秒针
seconds.rotation = (new Date()).getSeconds() * 6;
秒.更新（）；
// 中心圆
中心更新（）；
}, (1000 / 帧率) | 0);
} 别的 {
alert('weisico.com提示：您的浏览器不支持HTML5无法预览。');
}
</脚本>
</中心>
</正文>
</html>
