canvas Path2D 对象

2020-3-22 10:58| 作者: admin| 查看: 484| 评论: 0|来自: 蚂蚁部落

canvas 新增对象,并正式发布,只有最新版本的浏览器才会支持。

Path2D 对象让开发者可以存储路径,简化 canvas 绘制代码,并提升运行速度。

构造函数提供三种方式来创建Path2D 对象:

[JavaScript] 纯文本查看 复制代码
// 构造函数没有参数
new Path2D();
// Path2D 对象作为参数
new Path2D(path);
// SVG 路径作为参数
new Path2D(d);

第三个构造函数的重载是使用 SVG 路径数据来构建。

开发者可以重复使用自己的 SVG 路径在 canvas 中直接来绘制同样的形状:

[JavaScript] 纯文本查看 复制代码
let p = new Path2D("M10 10 h 80 v 80 h -80 Z");

在构建一个空的路线对象时,可以在 CanvasRenderingContext2D 环境中直接使用自己熟悉的路径方法。

对于 CanvasRenderingContext2D 基础知识可以参阅 canvas getContext()一章节。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
  border:2px dotted #ccc;
}
</style>
<script>
window.onload = ()=> {
  let cvs = document.getElementById('canvas');
  let ctx = cvs.getContext("2d");
  let circle = new Path2D();
  circle.arc(60, 60, 50, 0, 2 * Math.PI);
  ctx.stroke(circle);
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

上述代码利用 Path2D 对象绘制一个图形,代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/22/110033wuqf11fd1t9ccdem.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).通过构造方法构造一个空路径Path2D对象实例。

(2).此时可以利用CanvasRenderingContext2D 环境提供的路径方法arc()。

(3).然后为路径方法提供相关参数,最后描边将圆形绘制出来。

下面再演示一下构造函数参数是 SVG 路径的情形。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
  border:2px dotted #ccc;
}
</style>
<script>
window.onload = ()=> {
  let cvs = document.getElementById('canvas');
  let ctx = cvs.getContext("2d");
  let circle = new Path2D("M10 10 h 80 v 80 h -80 Z");
  ctx.stroke(circle);
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

Path2D()构造函数参数是一个 SVG 路径,代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/22/110104svvtj1k07k0tx1d4.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

构造函数参数是一个矩形路径,然后描边将其绘制出来。

再来看一段关于此对象的代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
  border:2px dotted #ccc;
}
</style>
<script>
window.onload = ()=> {
  let cvs = document.getElementById("canvas");
  let ctx = cvs.getContext("2d");

  ctx.translate(180, 170);

  let rect = new Path2D();
  rect.rect(80, 20, 80, 40);

  setInterval(function () {
    ctx.clearRect(-180, -170, 500, 350);
    ctx.rotate(Math.PI / 100);
    ctx.fill(rect);
  },20);
}
</script>
</head>
<body>
  <canvas id="canvas" width="500" height="350"></canvas>
</body>
</html>

上面代码将绘制矩形的路径存储起来,之前回调函数中的代码大致如下:

[JavaScript] 纯文本查看 复制代码
ctx.clearRect(-180, -170, 500, 350);
ctx.rotate(Math.PI / 100);
ctx.fillRect(80, 20, 100, 40);

首先存储矩形路径,然后在后面重复使用,简化了操作,性能也会增加。

如果复杂庞大的代码 Path2D 对象优势体现的会更加明显。

原有canvas API 也会跟随者发生变化,距离如下:

[JavaScript] 纯文本查看 复制代码
ctx.fill(path)
ctx.stroke(path)

旧的API 上述两个方法是没有参数的,现在增加通过Path2D()创建的路径对象。

特别说明:当前蚂蚁部落 canvas 教程并没有更新 API,正式发布后会第一时间更新。


鲜花

握手

雷人

路过

鸡蛋
返回顶部