canvas moveTo()

2018-9-29 14:38| 作者: admin| 查看: 1917| 评论: 0|来自: 蚂蚁部落

moveTo由move + to两个单词构成,字面意思是将某一个"东西"移到指定位置。

下面通过通俗和专业术语两个方面介绍一下这个被移动的"东西"到底是什么。

一.通俗介绍:

实际绘画中,绘制一个图案总要有一个起笔的地方,所以要把画笔移动到画纸的适当位置。

然后从这个起笔点,开始进行随心所欲的绘制工作。一副完整的图画,可能由很多小的图案构成,所以绘制完一个小的图案之后,画笔的位置需要移动到新的位置,然后再绘制其他构成图画的小图案。

于是,这个被移动的"东西"就是画笔。

二.专业术语介绍:

此方法可以将子路径的起点位置移动到指定位置。

涉及到canvas中路径与子路径的概念,任何时刻,canvas只有一条路径,但路径可以同时拥有多个子路径。moveTo方法功能就是移动子路径起点到指定位置。

相关阅读:

(1).路径概念可以参阅canvas路径与子路径详解一章节。

(2).beginPath方法可以参阅canvas beginPath()一章节。

语法结构:

[JavaScript] 纯文本查看 复制代码
context.moveTo(x,y);

参数解析:

(1).x:必需,子路径的目标位置的x坐标。

(2).y:必需,子路径的目标位置的y坐标。

浏览器兼容:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).火狐浏览器支持此方法。

(5).Opera浏览器支持此方法。

(6).Safari浏览器支持此方法。

代码实例:

[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.stroke();
}
</script>
</head>
<body>
  <canvas id="ant" width="300" height="300"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/29/144025a12chtmwbcb9zc5c.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码绘制了一个简单的竖线,分析如下:

(1).ctx.beginPath()创建一个新的路径,路径中可以有多个子路径。特别说明,在调用getContext方法获取绘图环境后,会隐式调用beginPath方法,所以首个beginPath方法可以省略。

(2).ctx.moveTo(30,20)方法将子路径的起始位置设置在坐标(30,20)处。

(3).然后再结合lineTo方法绘制一条直线。

[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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/29/144055ffxqg4f7dz4gguzg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

前面已经提到过,一条路径中,可以有多个子路径。通过第一个子路径绘制了一个竖线,然后再使用moveTo方法将新子路径的起始移动到(50,200),然后以此为起点创建一个斜线。

[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.lineWidth = 6;
  ctx.beginPath();
  //目的绘制一条红色的竖线
  ctx.strokeStyle = "red";
  ctx.moveTo(100, 10);
  ctx.lineTo(100, 80);
  ctx.stroke();
  //目的绘制一条红色的竖线
  ctx.beginPath();
  //moveTo不能省略
  ctx.moveTo(100, 80);
  ctx.lineTo(200, 80);
  ctx.strokeStyle = "blue";
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/29/144122tjvgdtjq7v8o4874.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码中的第二个moveTo方法不能省略。

因为beginPath方法创建一个新的路径,如果不在设置一个子路径起始点,那就无从下笔绘图了。


鲜花

握手

雷人

路过

鸡蛋
返回顶部