html5 canvas 路径渲染_画线

一、canvas 画线

lineTo（）  、moveTo() 、arcTo() 、quadraticCurveTo()、 bezierCurveTo() 、beginPath()、 closePath()

 

 

二、canvas 画多边形 线

strokeRect() 

context.strokeRect(x, y, width, height);

rect()  功能同 strokeRect()

arc() 

context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

参数
各个参数含义和作用如下：

 

 

ellipse()

context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

参数
各个参数含义和作用如下：

 

 

setLineDash(),getLineDash()

ctx.setLineDash(segments);

参数
segmentsArray
数值列表数组。例如[5, 5]，表示虚线的实线和透明部分长度是5像素和5像素。如果此参数值适合空数组[]，则表示实线，常用来重置虚线设置。

context.getLineDash(); 
返回值是一个数组，数组里边的值就是数字，称为数字列表。所谓虚线，就是一段实线一段空隙交替出现的条线，而这里的数字列表中的值标识的就是交替实线和间歇的长度值。如果设置虚线的时候的数字是个奇数，则数组里边的数字就会被复制和链接，这样数量就变成偶数。

 

 

三、cavans 画路径

 stroke();   

context.stroke();
context.stroke(path);

参数
pathObject
指Path2D对象。

属性关联：lineWidth,strokeStyle

 

四、canvas 路径处理

stroke() : 按照路线绘线条。

fill() : 使用当前设置好的 style 来填充路径区域。

clip() : 按照已有的路线在画布中设置剪辑区域，调用后图形编辑代码只会对编辑区域有效，对外界无效。如未调用则就是当前整个 canvas 为编辑区域。

 

五、canvas 路径判断

isPointInPath() ,isPointInStroke()

context.isPointInPath(x, y);
context.isPointInPath(x, y, fillRule);

// 下面语法IE不支持
context.isPointInPath(path, x, y);
context.isPointInPath(path, x, y, fillRule);

检测点，是否在路径上。

参数

 

context.isPointInStroke(x, y);
context.isPointInStroke(path, x, y);
// 检测点是否在描边路径上，描边越粗，则检测区域越大。

 

 

 

更多：

html5 canvas 文本渲染

html5 canvas 简介

Canvas 事件绑定|Canvas事件处理