构建更复杂的 canvas 应用程序本小节将展示一系列示例，每个示例的功能都比前一个示例略有增加。
更深刻的视觉体验首先，将一组矩形放置到 canvas 上。记住，矩形是拥有 4 条直边和 4 个直角的图形，正方形是矩形的变体。 显示 canvas 上有一系列矩形，每个矩形都比前一个略小。注意，每个矩形的颜色都不同，使其更清晰明确。
图 2. 使用一些矩形填充的 canvas 显示了用于创建图 2 中的 canvas 的代码。每个矩形都由两行代码创建：首先，fillStyle 方法使用颜色定义的红、绿、蓝（RGB）格式定义颜色（fillStyle='rgb(255,0,0)）。然后，fillRect 方法（fillRect(50,50,300,300)）定义大小。前两个值设置起始坐标，后两个值设置结束坐标。
清单 2. 使用 JavaScript 代码创建上下文并使用各种方法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
| <!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
window.onload=function() {
var mycanvas=document.getElementById("myCanvasTag");
var mycontext=mycanvas.getContext('2d');
mycontext.fillStyle='rgb(0,0,255)';
mycontext.fillRect(0,0,400,400);
mycontext.fillStyle='rgb(255,0,0)';
mycontext.fillRect(50,50,300,300);
mycontext.fillStyle='rgb(0,255,0)';
mycontext.fillRect(100,100,200,200);
mycontext.fillStyle='rgb(100,100,100)';
mycontext.fillRect(125,175,150,25);
}
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>
|
要在 canvas 上绘图，通过将 getContext('2d') 应用到 canvas 元素访问提供方法的 API。通过这个 document.getElementById 方法，canvas 元素被设置为一个 JavaScript 变量：
1
| var mycanvas=document.getElementById("myCanvasTag");
|
然后将 getContext 应用到 canvas 元素，如下所示。
1
| var mycontext=mycanvas.getContext('2d');
|
一旦一个变量被设置到上下文，所有方法就可以使用了。
下一个示例展示如何结合两种技术。一种是矩形重叠，方法是使用 fillRect 参数来定位矩形（见 ）。
图 3. 向一个 canvas 上的矩形应用透明度 第二种技术是 RGB 颜色处理的变体，即添加透明度。不使用 rgb，而是使用 rgba。a 表示 alpha 通道，该通道控制透明度。在图 3 中的示例中，第二个矩形的透明度被设置为 50%（或 .5），第三个设置为 25%（或 .25）。 显示了完整的标记。
清单 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
| <!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
window.onload=function() {
var mycanvas=document.getElementById("myCanvasTag");
var mycontext=mycanvas.getContext('2d');
mycontext.fillStyle='rgb(0,0,255)';
mycontext.fillRect(30,30,300,300);
mycontext.fillStyle='rgba(0,255,0,0.5)';
mycontext.fillRect(60,60,300,300);
mycontext.fillStyle='rgba(255,0,0,0.25)';
mycontext.fillRect(90,90,300,300);
}
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>
|
渐变— 经过协调的颜色混合 — 原生于 canvas ，通过两种方法：createLinearGradient 和 createRadialGradient。 展示了一个线性渐变。addColorStop 方法定义一个颜色，以及它在渐变中变为活动状态的位置。由于一个渐变可以拥有多个颜色停止，因此这种定位是主观的。颜色定位值必须介于 0 到 1 之间，但测试变体和颜色停止的数量可以生成不同的结果，即使一个值（比如 .25）保持不变。换句话说，一个颜色停止可以将其位置设定为 .25，但是相关颜色可以从整个渐变路径的四分之一处之后一点开始发生，一直持续到渐变结束，具体情况取决于您设置其他颜色停止的位置。记住，这是一个新的实现，可能还在改进过程中。渐变的一个好处是它们总是引人注目，无论代码和结果是否经过完美的协调。
图 4. 一个线性渐变 图 4 中的渐变通过 中的 JavaScript 代码创建。
清单 4. 创建一个线性渐变1
2
3
4
5
6
7
| var mycanvas=document.getElementById("myCanvasTag");
var mycontext=mycanvas.getContext('2d');
var mygradient=mycontext.createLinearGradient(30,30,300,300);
mygradient.addColorStop(0,"#FF0000");
mygradient.addColorStop(1,"#00FF00");
mycontext.fillStyle=mygradient;
mycontext.fillRect(0,0,400,400);
|
注意，清单 4 中的颜色停止被全面实现为从这个方法本身创建的一个实时（on-the-fly）渐变的一个方法。语句 mygradient.addColorStop(0,"#FF0000") 显示颜色停止拥有两个参数：位置和颜色。
展示了一个放射状渐变。用于创建这个渐变的代码与清单 4 中的代码类似，除了使用 createRadialGradient 方法替代 createLinearGradient 方法之外。
图 5. 一个放射状渐变 用于创建图 5 中的放射状渐变的代码如 所示。注意所有 5 个颜色停止。
清单 5. 创建一个放射状渐变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
| <!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
window.onload=function() {
var mycanvas=document.getElementById("myCanvasTag");
var mycontext=mycanvas.getContext('2d');
var mygradient=mycontext.createRadialGradient(300,300,0,300,300,300);
mygradient.addColorStop("0","magenta");
mygradient.addColorStop(".25","blue");
mygradient.addColorStop(".50","green");
mygradient.addColorStop(".75","yellow");
mygradient.addColorStop("1.0","red");
mycontext.fillStyle=mygradient;
mycontext.fillRect(0,0,400,400);
}
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px blue solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>
|
|
