canvas笔记--Path2D篇

最新推荐文章于 2024-04-08 16:42:45 发布

努力的豌豆芽

最新推荐文章于 2024-04-08 16:42:45 发布

阅读量2.8k

点赞数 1

文章标签： canvas js html5

本文链接：https://blog.csdn.net/qq_44758643/article/details/108752662

版权

Path2D对象

Path2()

Path2()可使用最新版本的浏览器中的对象来缓存或记录这些绘图命令。您可以快速播放路径。

Path2D()构建函数返回一个新实例化的Path2D对象任意的与另一条路径作为参数（创建一个副本）或任选的用有一串svg路径数据

new Path2D();     //空路径对象
new Path2D(path); // 从另一个Path2D对象复制
new Path2D(d);    // SVG路径数据中的路径

实例演示：

创建一个矩形和一个圆两者存储为path2D对象，以便以后使用


  
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

   var rectangle=new Path2D();//构建对象
   rectangle.rect(10,10,50,50);//构建正方形
   var circle=new Path2D();//构建对象
   circle.arc(100,35,25,0.2*Math.PI);//构建原型

   ctx.stroke(rectangle);//画出对象
   ctx.fill(circle);//画出对象
  }
}
    </script>
</html>

运行效果：

在这里插入图片描述

使用svg路径

可以使用svg路径来初始化画布上的路径，。这可能使您可以传递路径数据并在SVG和canvas中重复使用它们。

案例：

移动点（M10,10）向右平移（h，80），然后向下平移80点，然后左移80点，然后回到起点（z）.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');


   var p = new Path2D('M10 10 h 80 v 80 h -80 Z');

   ctx.stroke(p);
  }
}
    </script>
</html>

运行效果：

在这里插入图片描述

努力的豌豆芽

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
canvas笔记--Path2D篇

Path2D对象Path2()Path2()可使用最新版本的浏览器中的对象来缓存或记录这些绘图命令。您可以快速播放路径。Path2D()构建函数返回一个新实例化的Path2D对象任意的与另一条路径作为参数（创建一个副本）或任选的用有一串svg路径数据new Path2D(); //空路径对象new Path2D(path); // 从另一个Path2D对象复制new Path2D(d); // SVG路径数据中的路径实例演示：创建一个矩形和一个圆两者存储为path2D对象，以
复制链接

扫一扫