time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > HTML5初探绘制图像(下)canvas元素的使用

HTML5初探绘制图像(下)canvas元素的使用

时间:2013-05-01 23:59 点击:4123次 字体:[ ]




接上一篇:HTML5初探绘制图像(上)canvas元素的使用

 

绘制渐变图形

fillStyle除了指定颜色外,还可以指定填充对象。
绘制线性渐变时,需要用到LinearGradient对象,创建函数为:
createLinearGradient(xStart, yStart, xEnd, yEnd);
xStart为渐变起始横坐标
yStart为渐变起始纵坐标
xEnd为渐变结束横坐标
yEnd为渐变结束纵坐标
通过该方法可以创建一个使用两个坐标点的LinearGradient对象。
而后在通过addColorStop进行颜色设定:
addColorStop(offset, color)
offset为所设定颜色离开起始点的偏移量(0,1之间)
color为指定的颜色。
因为是渐变至少需要使用两次addColorStop方法。
最后将fillStyle设定为LinearGradient对象执行填充变可绘制图形了。

  1. 绘制渐变图形  
  2.  <!DOCTYPE html> 
  3.  <html xmlns="http://www.w3.org/1999/xhtml"> 
  4.  <head> 
  5.      <title></title> 
  6.      <style type="text/css"> 
  7.          div  
  8.          {  
  9.              position: absolute;  
  10.              width: 1px;  
  11.              height: 1px;  
  12.              line-height: 1px;  
  13.          }  
  14.      </style> 
  15.      <script src="../jquery-1.7.1.js" type="text/javascript"></script> 
  16.      <script type="text/javascript"> 
  17.          //x2 + y2 = r2;  
  18.          $(document).ready(function () {  
  19.              //先画x,y  
  20.              var canvas = $('#canvas')[0];  
  21.              var ctx = canvas.getContext('2d');  
  22.    
  23.              //#99d9ea  
  24.              var g1 = ctx.createLinearGradient(0, 0, 0, 300);  
  25.              g1.addColorStop(0, 'gray');  
  26.              g1.addColorStop(1, '#99d9ea');  
  27.              ctx.fillStyle = g1;  
  28.              ctx.fillRect(0, 0, 400, 300);  
  29.    
  30.          });  
  31.        
  32.      </script> 
  33.  </head> 
  34.  <body> 
  35.      <canvas id="canvas" width="400" height="300"> 
  36.      </canvas> 
  37.  </body> 
  38.  </html> 

HTML5初探绘制图像(下)canvas元素的使用_www.fengfly.comHTML5初探绘制图像(下)canvas元素的使用_www.fengfly.com



本文地址 : http://www.fengfly.com/plus/view-212668-1.html
标签: HTML5 canvas
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: