HTML5的画布：Paths

最新推荐文章于 2024-04-04 05:28:17 发布

一喵呜

最新推荐文章于 2024-04-04 05:28:17 发布

阅读量1.3k

点赞数 1

分类专栏： HTMl5 移动端开发 HTMl5canvas HTML5自由者文章标签： HTML5 黄艺斌 HTML5自由者 canvas

本文链接：https://blog.csdn.net/html5_/article/details/47316697

版权

本文深入探讨了HTML5 Canvas的路径绘制，包括开始和关闭路径、线宽、线帽样式、行连接、arc()函数、二次及三次贝塞尔曲线等。通过示例代码展示了不同函数在画布上的效果，帮助理解这些基本概念。

摘要由CSDN通过智能技术生成

HTML5的画布路径是一系列的点与点之间的绘图指令。例如，一系列的点用线在它们之间，或者与它们之间的电弧。

路径用来绘制多种类型的形状（线，圆，多边形等）的HTML5画布上的，所以要理解这个核心概念是很重要的。

开始和关闭路径

路径开始和结束时使用的2D上下文函数调用beginPath（）和closePath（） ，就像这样：

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.beginPath();

//... path drawing operations

context.closePath();

moveTo()

当使用一个路径图，使用的是虚拟的“笔”或“指针”。这个虚拟指针总是位于在一些点。移动虚拟指针是通过使用2D上下文功能 MOVETO（X，Y） ，就像这样：

context.moveTo(10,10);

lineTo()

context.beginPath();

context.moveTo(10,10);
context.lineTo(50,50);

context.closePath();

stroke() + fill()

context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);