canvas绘制钟表

最新推荐文章于 2023-10-26 08:47:56 发布

__Zoe__

最新推荐文章于 2023-10-26 08:47:56 发布

阅读量140

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/qq_24917475/article/details/101211127

版权

HTML+CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

要绘制路径，首先必须调用 beginPath() 方法，表示要开始绘制新路径。

<html>
  <body>
    <canvas id="drawing" width="500" height="500">Is drawing of something</canvas>

    <script>
      var drawing = document.getElementById('drawing');
      // 确认浏览器支持canvas元素
      if (drawing.getContext) {
        var context = drawing.getContext('2d');
        // 开始路径
        context.beginPath();
        // 绘制外圆
        context.arc(250, 100, 99, 0, 2*Math.PI, false);
        // 绘制内圆
        context.moveTo(344, 100);
        context.arc(250, 100, 94, 0, 2*Math.PI, false);
        // 绘制数字
        context.font = "bold 14px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillText("12", 250, 20);
        context.fillText("9", 170, 100);
        // 旋转
        // context.rotate(1);
        // 绘制分针
        context.moveTo(250, 100);
        context.lineTo(250, 30);
        // 绘制时针
        context.moveTo(250, 100);
        context.lineTo(190, 100);
        // 描边路径
        context.stroke();
        
        if (context.isPointInPath(250, 6)) {
          console.log("point (250, 6) is in the path");
        } else {
          console.log("point (250, 6) isn't in the path");
        }

        var imgURL = drawing.toDataURL("image/png");
        var image = document.createElement("img");
        image.src = imgURl;
        document.body.appendChild(image);

      }
      
    </script>
  </body>
</html>

效果图：
在这里插入图片描述

__Zoe__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
canvas绘制钟表

要绘制路径，首先必须调用 beginPath() 方法，表示要开始绘制新路径。<html> <body> <canvas id="drawing" width="500" height="500">Is drawing of something</canvas> <script> var drawing...
复制链接

扫一扫

专栏目录