3、canvas的Path2D对像

最新推荐文章于 2025-08-04 22:41:58 发布

weixin_34050389

最新推荐文章于 2025-08-04 22:41:58 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： python json java

原文链接：https://my.oschina.net/lcl6659/blog/1844254

本文介绍如何使用Path2D对象简化HTML5 Canvas绘图过程，通过缓存绘画命令提高绘图效率。展示了如何绘制矩形和圆形的具体实现。

2019独角兽企业重金招聘Python工程师标准>>>

正如我们在前面例子中看到的，你可以使用一系列的路径和绘画命令来把对象“画”在画布上。

为了简化代码和提高性能，Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速地回顾路径。

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.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);
    ctx.stroke(rectangle);
    ctx.fill(circle);
  }
}

转载于:https://my.oschina.net/lcl6659/blog/1844254