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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Bonjourjw/article/details/79978840
文章标签: js  canvas
个人分类: 学习笔记
上一篇关于js with语句的一些理解
下一篇Vue.js源码观摩学习
想对作者说点什么? 我来说一句

qt qml canvas 实时绘图

2017年10月09日 50KB 下载

没有更多推荐了,返回首页

关闭
关闭