使用canvas绘图学习

最新推荐文章于 2024-06-08 22:16:13 发布

Bonjourjw

最新推荐文章于 2024-06-08 22:16:13 发布

阅读量302

点赞数

分类专栏：学习笔记文章标签： js canvas

本文链接：https://blog.csdn.net/Bonjourjw/article/details/79978840

版权

学习笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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

Bonjourjw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用canvas绘图学习

1.想要按书中要求绘制一个时钟，如图所示：实现代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;canvas学习&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;canvas style="width="400px&quo
复制链接

扫一扫

专栏目录