2.3 KiB
2.3 KiB
title | localeTitle |
---|---|
Paths | 路径 |
画布中的路径
路径是Canvas中绘图的构建块。路径只是一种形状。然后,可以通过抚摸或填充形状来绘制形状。
我们可以使用beginPath
, fill
和stroke
创建使用路径。
ctx.beginPath();
ctx.rect(0, 0, 100, 100);
ctx.fillStyle="black";
ctx.fill();
这会在画布的右上角创建一个黑色方块。我们可以使用strokeStyle
和fillStyle
来改变笔触和填充,它们都采用类似CSS的颜色字符串。我们也可以使用lineWidth
来使笔划更粗。
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.moveTo(0, 100);
ctx.lineTo(300, 250);
ctx.strokeStyle="red";
ctx.lineWidth=2;
ctx.stroke();
有四种基本绘图功能: rect
, moveTo
, lineTo
和arc
。
rect(x, y, width, height)
将从(x
,y
)维度(width
,height
)创建的矩形添加到路径中。moveTo(x,y)
将笔移动到画布上的某个点lineTo(x,y)
将笔移动到画布上的某个点,然后在新点和旧点之间添加一条线到路径。arc(x, y, r, ti, tf)
在半径为r
(x
,y
)和从角度ti
到tf
的路径上添加弧(圆的一部分)。
请注意,这些功能会添加到工作路径中。他们没有创造新的道路。
//example 1
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.rect(100, 100, 50, 50);
ctx.fill();
//example 2
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.beginPath();
ctx.rect(100, 100, 50, 50);
ctx.fill();
第一个示例将绘制两个正方形,而第二个示例仅绘制一个正方形,因为beginPath
丢弃了旧工作路径上的第一个矩形。
这个事实导致制作canvas
动画时常见的错误。
var x = 0;
var y = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.rect(x, y, 50, 50);
ctx.fill();
x+=1;
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
上面的动画应该会在屏幕上移动,而不是创建一个长黑条。原因是在draw
循环中没有调用beginPath
。
要阅读有关动画的更多信息,请参阅动画页面。