canvas特效代码详解（3）
canvas是一个就基于像素的画图h5元素。
利用canvas方法绘制渐变图像
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 canvas{ 8 border: 1px solid #000; 9 margin: 100px 400px; 10 } 11 </style> 12 </head> 13 <body> 14 <canvas id="canvas" width="400" height="400"></canvas> 15 <script type="text/javascript"> 16 var canvas = document.getElementById("canvas"); 17 var context = canvas.getContext("2d"); 18 // 调用createRadialGradient()方法创建径向渐变 19 var radialGradient = context.createRadialGradient(200,200,20,200,200,100); 20 // 使用addColorStop()方法来指定色标 21 radialGradient.addColorStop(0.0,'red'); 22 radialGradient.addColorStop(0.2,'green'); 23 radialGradient.addColorStop(0.4,'yellow'); 24 radialGradient.addColorStop(0.6,'black'); 25 radialGradient.addColorStop(0.8,'greenyellow'); 26 radialGradient.addColorStop(0.9,'pink'); 27 // 绘制渐变矩形 28 context.fillStyle = radialGradient; 29 context.fillRect(100,100,200,200); 30 </script> 31 </body> 32 </html>
效果如下：
利用canvas方法设置不同颜色的字体
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 canvas{ 8 border: 1px solid #000; 9 } 10 </style> 11 </head> 12 <body> 13 <canvas id="canvas" width="500" height="500"></canvas> 14 <script type="text/javascript"> 15 var canvas = document.getElementById("canvas"); 16 context = canvas.getContext("2d"); 17 gradient = context.createLinearGradient(0,0,canvas.width,0); 18 gradient.addColorStop('0','black'); 19 gradient.addColorStop('0.3','red'); 20 gradient.addColorStop('0.6','yellow'); 21 gradient.addColorStop('1','green'); 22 context.font = '40px yahei'; 23 context.fillStyle = gradient; 24 context.fillText('hello world!',100,100); 25 </script> 26 </body> 27 </html>
效果图
