• 欢迎来到本站,本站主要做程序员相关技术、博客、笔记,如果喜欢本网站那么赶紧使用Ctrl+D 收藏吧!
  • 如果有任何疑问,可以在下方文章下方留下你的评论~

example of using html canvas moveTo and lineTo functions

技术文章 7个月前 (11-02) 2次浏览 0个评论

Browser support

Internet Explorer 9, Firefox, opera, chrome, and safari support the moveTo() and lineTo() methods.

Note: the <canvas> element is not supported in Internet Explorer 8 and earlier.

Definition and Usage

moveTo

The moveTo() method moves the path to a specified point in the canvas without creating lines.

lineTo

The lineTo() method adds a new point and creates a line from that point to the last specified point in the canvas (the method does not create a line).

Tip: You should use the stroke() method to draw the exact path on the canvas.

Example 1

Start a path and move to position 0,0. Create a line to reach position 300,150:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
china pen pal
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
</script>

</body>
</html>

example of using html canvas moveTo and lineTo functions

Example 2

Draw a path in the shape of the letter L:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>chinapenpal.com</title>
</head>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
China Pen Pal
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();
</script>

</body>
</html>

example of using html canvas moveTo and lineTo functions


中国笔友, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:example of using html canvas moveTo and lineTo functions
喜欢 (0)
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址