HTML5 新特性 - Canvas路径绘制

最新推荐文章于 2024-11-06 15:47:31 发布

黑猫了个怪怪

最新推荐文章于 2024-11-06 15:47:31 发布

阅读量372

点赞数

文章标签： html5 cocos2d 前端

本文链接：https://blog.csdn.net/Janicecat/article/details/121794218

版权

路径(path)是将预先设定好的坐标点,按照顺序连接起来所形成的图形.

路径绘制的基本步骤：

调用ctx.beginPath()开启一条新路径.

调用ctx.moveTo(x, y)将画笔移动到指定位置.

调用相关方法开始绘制路径(例如: ctx.lineTo(x, y))

最后通过stroke() 或 fill()方法进行描边或填充.

触摸相关事件总结

touchstart 开始触摸时触发

touchmove 触摸移动时触发

touchcancel 触摸被打断取消时触发

touchend 触摸结束时触发

`canvas`提供的绘制路径的常用`API`

ctx.rect() 用于绘制矩形路径：

//左上角x, 左上角y, 宽, 高
ctx.rect(x, y, width, height)

ctx.arc() 用于绘制圆弧路径：

// (x,y) 圆形坐标, 半径, 起始弧度值, 结束弧度值
ctx.arc(x, y, radius, startangle, endangle)

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        background-color: lightskyblue;
        border: 1px solid gold;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="640px" height="360px"></canvas>

    <script>
      let cvs = document.getElementById("canvas");
      let ctx = cvs.getContext("2d");

      //绘制路径
      ctx.beginPath();
      ctx.moveTo(300, 0);
      ctx.lineTo(230, 230);
      ctx.lineTo(400, 60);
      ctx.lineTo(200, 60);
      ctx.lineTo(370, 230);
      ctx.lineTo(300, 0);
      ctx.strokeStyle = "red";
      ctx.stroke();
    </script>
  </body>
</html>