在画布上绘制矩形区域有 3 种方法：
-
fillRect(x,y,width,height)，绘制已填充的矩形
-
strokeRect(x,y,width,height)，绘制矩形框线
-
clearRect(x,y,width,height)，擦除矩形的给定区域使之完全透明
对于这 3 种方法而言，
x 和
y 表示矩形在画布上相对于左上角的位置（
x=0, y=0），而
width 和
height 分别是矩形的宽度和高度。
图 3 显示了由 清单 2 中的代码创建的 3 个矩形区域。
图 3. 矩形画布
fillRect() 方法创建了一个矩形并使用默认的黑色填充它。
clearRect() 方法在第一个矩形的中心擦除一块矩形区域，该区域位于
fillRect() 方法所创建的矩形的中心。
strokeRect 方法创建一个仅黑色边框可见的矩形。
清单 2. 矩形画布代码
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE HTML>
<html>
<head>
<title>Rectangle Example</title>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #000000;
background-color: #ffff00;
}
</style>
<script type="text/javascript">
function drawShape(){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillRect(25,25,50,50);
context.clearRect(35,35,30,30);
context.strokeRect(100,100,50,50);
}
</script>
</head>
<body onload="drawShape();">
<canvas id="myCanvas" width="200" height="200"></canvas>
</body>
</html>
|
绘制弧形、曲线、圆形和半圆形
绘制圆形和半圆形都使用 arc() 方法。arc() 方法接收 6 个参数：
context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);
centerX 和 centerY 参数是圆心的坐标。radius 的含义和其数学上半径的含义一样：表示从圆心到圆周的直线距离。所创建的弧形将作为圆形的一部分。startAngle 和 endAngle 参数分别为弧形的起点和终端，单位为弧度。anticlockwise 参数是一个布尔值。当其值为 true 时，弧形就逆时针绘制；当为 false 时，弧形就顺时针绘制。
要使用 arc() 方法绘制圆形，将起始角度定义为 0，结束角度为 2*PI，如下所示：
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
要使用 arc() 方法绘制半圆形，将结束角度定义为 startingAngle + PI，如下所示：
context.arc(centerX, centerY, radius, startingAngle, startingAngle + Math.PI, false);
二次方曲线
使用 quadraticCurveTo() 方法创建二次方曲线 ，如下所示。二次方曲线由上下文点、控制点和结束点定义。控制点确定线条的曲度。
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, endX, endY);
贝塞尔曲线
与二次方曲线一样，贝塞尔（Bezier）曲线也有一个起始点和一个结束点；但与二次方曲线不同的是，它有两个控制点：
context.moveTo(x, y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
使用
bezierCurveTo() 方法来创建贝塞尔曲线。因为贝塞尔曲线通过两个而不是一个控制点来定义，所以可以创建更加复杂的曲线。
图 4 从左到右分别显示了弧形、二次方曲线、贝塞尔曲线、半圆形和圆形。
图 4. 弧形、曲线和圆形
图 4 使用清单 3 中的代码创建。
清单 3. 弧形、曲线和圆形的代码
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
<!DOCTYPE HTML>
<html>
<head>
<title>Arcs, Curves, Circles, & Semicircles</title>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
function drawArc(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 100;
var centerY = 160;
var radius = 75;
var startingAngle = 1.1 * Math.PI;
var endingAngle = 1.9 * Math.PI;
var counterclockwise = false;
context.arc(centerX, centerY, radius, startingAngle,
endingAngle, counterclockwise);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
};
function drawQuadratic(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(200, 150);
var controlX = 288;
var controlY = 0;
var endX = 388;
var endY = 150;
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
};
function drawBezier(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(350, 350);
var controlX1 = 440;
var controlY1 = 10;
var controlX2 = 550;
var controlY2 = 10;
var endX = 500;
var endY = 150;
context.bezierCurveTo(controlX1, controlY1, controlX2,
controlY2, endX, endY);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
};
function drawCircle(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 450;
var centerY = 375;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#800000";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
function drawSemicircle(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 100;
var centerY = 375;
var radius = 70;
var lineWidth = 5;
context.beginPath();
context.arc(centerX, centerY, radius, 0, Math.PI, false);
context.closePath();
context.lineWidth = lineWidth;
context.fillStyle = "#900000";
context.fill();
context.strokeStyle = "black";
context.stroke();
};
window.onload = function (){
drawArc();
drawQuadratic();
drawBezier();
drawCircle();
drawSemicircle()
}
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="500">
</canvas>
</body>
</html>
|
变形、缩放和旋转
(责任编辑：12图资源库)
