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);