HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)

详细解释HTML5 Canvas中渐进填充的参数设置与使用，Canvas中透明度的设置与使用，结合渐进填充与透明度支持，实现图像的Mask效果.

一：渐进填充(Gradient Fill)

Canvas支持两种渐进填充方式，一种为线性渐进填充(Line Gradient Fill)，另外一种称为经向渐变填充(RadialGradient Fill)。其API分别为：

createLinearGradient(x1, y1, x2, y2);

其中x1,y1为第一个点坐标，x2,y2为第二个点坐标。

createRadialGradient(x1, y1, r1, x2, y2, r2);

其中x1, y1为第一个中心点坐标,r1为半径，x2, y2为第二个中心点坐标，r2为半径。

为每个点设置颜色

addColorStop(position, color);

其中position表示位置，大小范围[0~1]其中0表示第一个点，1表示第二个点坐标

Color表示颜色值，任何CSS的颜色值。

渐进填充对象创建与配置之后可以用来设置context的strokeStyle与fillStyle实现文字，几何形状的渐进颜色填充。

线性渐进方式的代码演示：

 1 <!doctype html>
 2 <html lang="en"> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title>渐变</title>
 6     
 7 </head>
 8 <body>
 9     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
10      你的浏览器不支持canvas!
11     </canvas>
12     <script type="text/javascript">
13         var c=document.getElementById("myCanvas");
14         var cxt=c.getContext("2d");
15         var grd=cxt.createLinearGradient(0,0,175,50);
16         grd.addColorStop(0,"#FF0000");
17         grd.addColorStop(0.5,"#0000ff");
18         grd.addColorStop(0.6,"#ffffff");
19         grd.addColorStop(0.7,"#000000");
20         grd.addColorStop(1,"#00FF00");
21         cxt.fillStyle=grd;
22         cxt.fillRect(0,0,175,50);
23     </script> 
24 </body>
25 </html>

经向渐变填充:绘制一个矩形，并用放射状/圆形渐变进行填充.

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
 6 浏览器不支持canvas!
 7 </canvas>
 8 
 9 <script>
10 
11 var c=document.getElementById("myCanvas");
12 var ctx=c.getContext("2d");
13 var grd=ctx.createRadialGradient(75,50,5,90,60,100);
14 grd.addColorStop(0,"red");
15 grd.addColorStop(1,"white");
16 ctx.fillStyle=grd;
17 ctx.fillRect(10,10,150,100);
18 
19 </script>
20 
21 </body>
22 </html>

把一幅图像放置到画布上：

 1 <!doctype html>
 2 <html lang="en"> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title>画图</title>
 6 
 7 </head>
 8 <body>
 9     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
10      你的浏览器不支持canvas!
11     </canvas>
12     <script type="text/javascript">
13         var c=document.getElementById("myCanvas");
14         var cxt=c.getContext("2d");
15         var img=new Image()
16         img.src="flower.png"
17         cxt.drawImage(img,0,0);
18     </script> 
19 </body>
20 </html>

posted @ 2014-07-24 16:22  SkyTeam_LBM  阅读(370)  评论(0)  编辑  收藏  举报