canvas路径与子路径详解

2018-9-27 23:46| 作者: admin| 查看: 1840| 评论: 0|来自: 蚂蚁部落

路径在canvas是一个十分重要的概念,但往往会被初学者忽略。

如果对它没有良好的掌握,非常容易出现意想不到的问题。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.moveTo(100, 100);
  ctx.lineTo(200, 100);
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

代码目的是绘制一条直线,然而运行代码之后,发现页面什么都没有。

这是因为moveTo与lineTo方法绘制了一条路径,但是路径还没有进行描边操作。

代码修改如下:

[JavaScript] 纯文本查看 复制代码
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.moveTo(100, 100);
  ctx.lineTo(200, 100);
  ctx.stroke();
}

调用stroke方法进行描边即可绘制出相应的直线。

上述代码展示的是初学者容易犯的一个错误,通过此例子引出本文主角,路径。

一.路径与子路径:

路径本身是很容易理解的,与PS中的路径如出一辙。

通俗点说,路径勾勒出图像的轮廓,然后对路径进行描边和填充,使其显示出来。

canvas路径特点如下:

在绘图的任何时刻,只有一条路径存在,此路径可以拥有多个子路径

路径由beginPath方法创建,子路径可以利用canvas中的lineTo,或者arcTo等方法创建。

将描边颜色设置为红色,那么此路径中绘制的图案的描边颜色都是红色,在此路径中再绘制一条线,并将其描边颜色设置为蓝色,那么整个路径所有图案描边都会变成蓝色,包括前面已经绘制的红色线,本质是重新对整个路径进行一次描边,蓝色描边将红色描边覆盖在下面(红色描边依然存在,不要理解为重置)。

更多内容可以参阅canvas绘制图案是重叠绘制而不是重置一章节加深理解。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("ant");
  let ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.strokeStyle = "blue";
  ctx.moveTo(30,20);
  ctx.lineTo(30,120);
  
  ctx.moveTo(50,200);
  ctx.lineTo(80,220);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant" width="300" height="300"></canvas>
</body>
</html>

代码在一个路径中绘制两个子路径,moveTo方法用来设置子路径的起点位置。

关于moveTo方法的更多内容参阅canvas moveTo()一章节。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth = 6;
  ctx.strokeStyle = "red";
  ctx.moveTo(100, 10);
  ctx.lineTo(100, 80);
  ctx.stroke();

  ctx.strokeStyle = "blue";
  ctx.lineTo(200, 80);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/27/234736u8rstaxd4xp41yix.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

会在当前路径中重新再"涂抹"一遍描边颜色,竖线的红色描边会被蓝色覆盖。

为了避免上述情况,beginPath方法的作用就得以体现。

代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth = 6;
  ctx.strokeStyle = "red";
  ctx.beginPath();
  ctx.moveTo(100, 10);
  ctx.lineTo(100, 80);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(100, 80);
  ctx.lineTo(200, 80);
  ctx.strokeStyle = "blue";
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

上述代码实现了预期效果,竖线和横线具有不同的颜色。

这是因为使用beginPath方法可以开辟一条新的路径,在新路径上绘制的图案会不对前面绘制的图案产生影响。

更多关于路径的更多知识可以参阅canvas beginPath()详解一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部