1.想要按书中要求绘制一个时钟,如图所示:
实现代码如下:
<!DOCTYPE html>
<html>
<head>
<title>canvas学习</title>
</head>
<body>
<canvas style="width="400px";height="400px;background: orange" id="drawing"></canvas>
</body>
<script type="text/javascript">
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
var context = drawing.getContext("2d");
//绘制文本
context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12",100,20);
//起点对齐
context.textAlign = "start";
context.fillText("12",100,40);
//终点对齐
context.textAlign = "end";
context.fillText("12",100,60);
//开始路径
context.beginPath();
context.arc(100,100,99,0,2*Math.PI);
//注意可以通过lineWidth设置线条的宽度,还有lineCap控制线条末端的形状!
//绘制内圆
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
//绘制分针
context.moveTo(100,100);
context.lineTo(100,15);
//绘制时针
context.moveTo(100,100);
context.lineTo(35,100);
context.fillStyle = "pink";
/* context.fill();
*/
context.strokeStyle = "red";
//描边路径
context.stroke();
}
</script>
</html>
最终实际效果如图:
发现,修改canvas的大小,其时钟也随着画布的大小而变化,不应该会有这种怪异的事发生。找了很久才发现,实现过程中,我是通过style样式控制画布的大小,但是实际上后来绘圆时,是通过document文档对象模型进行操作,它只能对文档对象中的属性进行操作,并不能识别到样式文件中设置的大小,因此,我们绘制的圆是飘忽不定的。找到问题,修改即可。