canvas标签学习之路径

1.fill()

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.rect(20,20,150,100);
		ctx.fillStyle = "green";
		ctx.fill();
	</script>
</body>

fill() 方法填充当前的图像（路径）。默认颜色是黑色。

提示：请使用 fillStyle 属性来填充另一种颜色/渐变。

注释：如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

2.stroke()

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.beginPath();
		ctx.moveTo(20,20);
		ctx.lineTo(20,100);
		ctx.lineTo(90,100);
		ctx.strokeStyle = 'green';
		ctx.stroke();
	</script>
</body>

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

提示：请使用 strokeStyle 属性来绘制另一种颜色/渐变。

3.beginPath()

beginPath() 方法开始一条路径，或重置当前的路径。

提示：请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

4.moveTo()

把路径移动到画布中的指定点，不创建线条

fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

参数	描述
x	路径的目标位置的 x 坐标
y	路径的目标位置的 y 坐标

5.closePath()

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.beginPath();
		ctx.moveTo(20,20);
		ctx.lineTo(20,100);
		ctx.lineTo(90,100);
		ctx.strokeStyle = 'green';
		ctx.closePath();
		ctx.stroke();
	</script>
</body>

closePath() 方法创建从当前点到开始点的路径。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

提示：请使用 fill() 方法来填充图像（默认是黑色）。请使用 fillStyle 属性来填充另一个颜色/渐变。

6.lineTo()

lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

参数	描述
x	路径的目标位置的 x 坐标
y	路径的目标位置的 y 坐标

7.clip()

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.rect(50,20,200,120);
		ctx.stroke();
		ctx.clip(); //用在绘画图形之前
		ctx.fillStyle = 'green';
		ctx.fillRect(0,0,150,100);
		
	</script>
</body>

clip() 方法从原始画布中剪切任意形状和尺寸。

提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

8.quadraticCurveTo()

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.beginPath();
		ctx.moveTo(20,20);
		ctx.quadraticCurveTo(20,100,150,10);		
		ctx.stroke();
		
	</script>
</body>

quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。

提示：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

开始点：moveTo(20,20)
控制点：quadraticCurveTo(20,100,200,20)
结束点：quadraticCurveTo(20,100,200,20)

提示：请查看 bezierCurveTo() 方法。它有两个控制点，而不是一个。

context.quadraticCurveTo(cpx,cpy,x,y);

参数	描述
cpx	贝塞尔控制点的 x 坐标
cpy	贝塞尔控制点的 y 坐标
x	结束点的 x 坐标
y	结束点的 y 坐标

9.bezierCurveTo()

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.beginPath();
		ctx.moveTo(20,20);
		ctx.bezierCurveTo(20,100,100,100,100,20);	
		ctx.stroke();
		
	</script>
</body>

bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。

提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

开始点：moveTo(20,20)
控制点 1：bezierCurveTo(20,100,200,100,200,20)
控制点 2：bezierCurveTo(20,100,200,100,200,20)
结束点：bezierCurveTo(20,100,200,100,200,20)

提示：请查看 quadraticCurveTo() 方法。它有一个控制点，而不是两个。

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

参数	描述
cp1x	第一个贝塞尔控制点的 x 坐标
cp1y	第一个贝塞尔控制点的 y 坐标
cp2x	第二个贝塞尔控制点的 x 坐标
cp2y	第二个贝塞尔控制点的 y 坐标
x	结束点的 x 坐标
y	结束点的 y 坐标

10.arc()

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.arc(100,50,50,0,2*Math.PI);
		ctx.stroke();		
	</script>
</body>

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

11.arcTo()

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.beginPath();
		ctx.moveTo(20,20);
		ctx.lineTo(100,20);
		ctx.arcTo(150,20,150,70,50);
		ctx.lineTo(150,120);
		ctx.stroke();
	</script>
</body>

arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。

context.fillRect(x1,y1,x2,y2,r);

参数	描述
x1	弧的起点的 x 坐标
y1	弧的起点的 y 坐标
x2	弧的终点的 x 坐标
y2	弧的终点的 y 坐标
r	弧的半径

12.isPointInPath()

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.rect(20,20,150,100);
		if(ctx.isPointInPath(20,50)){
			ctx.stroke();
		}
	</script>
</body>

isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false。

context.isPointInPath(x,y);

canvas标签学习之路径

猜你喜欢