使用canvas绘图学习

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文档对象模型进行操作，它只能对文档对象中的属性进行操作，并不能识别到样式文件中设置的大小，因此，我们绘制的圆是飘忽不定的。找到问题，修改即可。

使用canvas绘图学习

猜你喜欢