发布：2016/1/29 0:41:48作者：管理员 来源：本站 浏览次数：1064
<canvas>是使用脚本（通常是javascript）来绘制图形的HTML5元素。可以用它来绘制图形，处理图片效果，还可用来 制作动画。不过，<canvas>本身并不不具备任何绘图的功能，它只是一个图形的容器，我们必须使用脚本来绘制图形。除了HTML全局属性 之外，<canvas>只有两个属性：
| 属性名 | 单位 | 描述 |
| width | 像素 | 设定<canvas>的宽度，默认值300 |
| height | 像素 | 设定<canvas>的高度，默认值150 |
getContext()方法会返回一个对象，该对象提供了在<canvas>上绘图的方法和属性，通过这些方法，我们可以在<canvas>上绘制文本、线条、矩形、圆形等各种图形。
接下来用<canvas>制作一个展示当前系统时间的动画时钟。时钟上的主要元素有：小时刻度、分钟刻度、时针、分针、秒针（由一条直线和两个圆形组成）和边框。
canvas不能将每个绘制的对象单独从画布中移除，只能清除绘图区域，然后重新绘制。所以，绘制前必须首先清除绘画区域，然后在绘画区域中绘制钟盘刻度、时针、分针、秒针、时钟边框，指针的旋转角度根据当前时间计算。
设置一个定时器，将上面的绘图流程每秒重复十次，每次绘制时钟时，先清除了上一次绘制的时钟，然后根据当前的时间重新绘制，时钟看上去就像在走一样。
图1
绘制前，需要使用getContext('2d')获取绘制二维图形的对象，绘制时钟我们用到了该对象下面一些的属性和方法：
| 属性或方法名 | 描述 |
| save() | 保存当前绘画对象的状态 |
| clearRect() | 清除一个矩形区域中的所有像素 |
| translate() | 将指定的坐标设置为新的坐标原点（0，0） |
| scale() | 按比例放大或缩小当前绘制的内容 |
| rotate() | 将当前画笔顺时针旋转，单位弧度，2π旋转为一周 |
| strokeStyle | 设置或取得当前画笔的边框颜色等 |
| fillStyle | 设置或取得当前画笔的填充颜色等 |
| lineWidth | 设置或取得当前线条宽度 |
| lineCap | 设置或取得线条端点形状 |
| beginPath() | 开始或重置当前的绘图路径 |
| moveTo() | 将路径移动到一个新的路径点，但不创建线条 |
| lineTo() | 将路径移动到一个新的路径点，并原路径点和新路径点之间创建一个线条 |
| arc() | 绘制圆形或弧形 |
| stroke() | 填充刚定义的路径 |
| restore() | 返回至最近一次保存的绘画对象状态 |
下面是完整的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function init(){
clock();
setInterval(clock,100);
}
function clock(){
var now = new Date();
var ctx = document.getElementById('canvas').getContext('2d');
ctx.save();
ctx.clearRect(0,0,150,150);
ctx.translate(75,75);
ctx.scale(0.4,0.4);
ctx.rotate(-Math.PI/2);
ctx.strokeStyle = "black";
ctx.fillStyle = "white";
ctx.lineWidth = 8;
ctx.lineCap = "round";
// 绘制小时刻度
ctx.save();
for (var i=0;i<12;i++){
ctx.beginPath();
ctx.rotate(Math.PI/6);
ctx.moveTo(100,0);
ctx.lineTo(120,0);
ctx.stroke();
}
ctx.restore();
// 绘制分钟刻度
ctx.save();
ctx.lineWidth = 5;
for (i=0;i<60;i++){
if (i%5!=0) {
ctx.beginPath();
ctx.moveTo(117,0);
ctx.lineTo(120,0);
ctx.stroke();
}
ctx.rotate(Math.PI/30);
}
ctx.restore();
//获取当前时间的毫秒、秒、分钟、小时数值
var ms = now.getMilliseconds( );
var sec = now.getSeconds();
var min = now.getMinutes();
var hr = now.getHours();
hr = hr>=12 ? hr-12 : hr;
ctx.fillStyle = "black";
// 绘制时针
ctx.save();
ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
ctx.lineWidth = 14;
ctx.beginPath();
ctx.moveTo(-20,0);
ctx.lineTo(80,0);
ctx.stroke();
ctx.restore();
// 绘制分针
ctx.save();
ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(-28,0);
ctx.lineTo(112,0);
ctx.stroke();
ctx.restore();
// 绘制秒针
ctx.save();
ctx.rotate((sec+ms/1000) * Math.PI/30);
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(-30,0);
ctx.lineTo(83,0);
ctx.stroke();
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(95,0,10,0,Math.PI*2,true);
ctx.stroke();
ctx.fillStyle = "#555";
ctx.arc(0,0,3,0,Math.PI*2,true);
ctx.fill();
ctx.restore();
// 绘制时钟圆形外框
ctx.beginPath();
ctx.lineWidth = 14;
ctx.strokeStyle = '#325FA2';
ctx.arc(0,0,142,0,Math.PI*2,true);
ctx.stroke();
ctx.restore();
}
</script>
</head>
<body onload="init()">
<canvas id="canvas">您的浏览器不支持Canvas标签</canvas>
</body>
</html>
