HTML 5深入浅出教学篇之十一

介绍

站在用户的角度思考问题，与客户深入沟通，找到云霄网站设计与云霄网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、网站设计、外贸营销网站建设、企业官网、英文网站、手机端网站、网站推广、申请域名、网络空间、企业邮箱。业务覆盖云霄地区。

HTML 5: 画布（canvas）之效果

填充色, 笔划色, 颜色值 | fillStyle, strokeStyle

剪裁 | clip()

渐变色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()

贴图的平铺模式 | createPattern()

阴影效果 | shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor

全局 Alpha | globalAlpha

新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation

保存画布上下文，以及恢复画布上下文 | save(), restore()

像素操作 | createImageData(), getImageData(), putImageData(), ImageData, CanvasPixelArray

示例

1、填充色, 笔划色, 颜色值 | fillStyle, strokeStyle
canvas/effect/color.html

 
 
   
  
     
  
     
  
     
  
      填充色, 笔划色, 颜色值   
  
     
  
     
  
         
  
          您的浏览器不支持 canvas 标签    
  
         
  
         
  
      Demo   
  
      清除画布   
  
         
  
          var ctx = document.getElementById('canvas').getContext('2d');    
  
          function drawIt() {    
  
              clearIt();    
  
              /*    
  
               * context.fillStyle - 指定填充色的颜色值    
  
               *    
  
               * context.strokeStyle - 指定笔划色的颜色值    
  
               *    
  
               * 颜色值示例如下：    
  
               *   Color Name - "green"    
  
               *   #rgb - "#0f0"    
  
               *   #rrggbb = "#00ff00"   
  
               *   rgb(0-255, 0-255, 0-255) - rgb(0, 255, 0)    
  
               *   rgb(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%) - rgb(0%, 100%, 0%)    
  
               *   rgba(0-255, 0-255, 0-255, 0.0-1.0) - rgb(0, 255, 0, 1)    
  
               *   rgba(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%, 0.0-1.0) - rgb(0%, 100%, 0%, 1)    
  
               */    
  
              ctx.fillStyle = 'Red';    
  
              ctx.strokeStyle = 'Green';    
  
              ctx.lineWidth = 10;    
  
              // 看看 fillStyle 颜色的示例和 strokeStyle 颜色的示例，以及先 stroke 再 fill 和先 fill 再 stroke 的区别    
  
              ctx.beginPath();    
  
              ctx.rect(20, 20, 100, 100);    
  
              ctx.stroke();    
  
              ctx.fill();    
  
              ctx.beginPath();    
  
              ctx.rect(140, 20, 100, 100);    
  
              ctx.fill();    
  
              ctx.stroke();    
  
          }    
  
          function clearIt() {    
  
              ctx.clearRect(0, 0, 260, 140);    
  
          }

2、剪裁 | clip()
canvas/effect/clip.html

 
 
   
  
     
  
     
  
     
  
      剪裁   
  
     
  
     
  
         
  
          您的浏览器不支持 canvas 标签    
  
         
  
         
  
      Demo   
  
      清除画布   
  
         
  
          var ctx = document.getElementById('canvas').getContext('2d');    
  
          function drawIt() {    
  
              clearIt();    
  
              var img = new Image();    
  
              img.onload = function () {    
  
                  ctx.drawImage(img, 0, 0, 512, 512);    
  
              }    
  
              img.src = "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";    
  
              // img.src = "http://www.cnblogs.com/assets/html5_logo.png";    
  
              /*    
  
               * context.clip() - 只显示当前路径所包围的剪切区域    
  
               */    
  
              ctx.beginPath();    
  
              ctx.arc(256, 256, 100, 0, Math.PI * 2, true);    
  
              ctx.clip();    
  
          }    
  
          function clearIt() {    
  
              ctx.clearRect(0, 0, 512, 512);    
  
          }

3、渐变色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()
canvas/effect/gradient.html

 
 
   
  
     
  
     
  
     
  
      渐变色   
  
     
  
     
  
         
  
          您的浏览器不支持 canvas 标签    
  
         
  
         
  
      Demo   
  
      清除画布   
  
         
  
          var ctx = document.getElementById('canvas').getContext('2d');    
  
          function drawIt() {    
  
              clearIt();    
  
              /*    
  
               * context.createLinearGradient(xStart, yStart, xEnd, yEnd) - 创建线性渐变对象，并返回 CanvasGradient 类型的对象    
  
               *   xStart, yStart - 线性渐变对象的起始点坐标    
  
               *   xEnd, yEnd - 线性渐变对象的结束点坐标    
  
               *    
  
               * CanvasGradient.addColorStop(offset, color) - 新增一个渐变参考点    
  
               *   offset - 渐变参考点的位置，0.0 - 1.0 之间。起始点为 0，结束点为 1    
  
               *   color - 渐变参考点的颜色值     
  
               */    
  
              var linearGradient = ctx.createLinearGradient(50, 0, 50, 100);    
  
              linearGradient.addColorStop(0, "red");    
  
              linearGradient.addColorStop(0.5, "green");    
  
              linearGradient.addColorStop(1, "blue");    
  
              ctx.beginPath();    
  
              ctx.arc(50, 50, 50, 0, 2 * Math.PI, true);    
  
              ctx.fillStyle = linearGradient;    
  
              ctx.fill();    
  
              /*    
  
               * context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) - 创建放射性渐变对象，并返回 CanvasGradient     
  
               *   xStart, yStart - 放射性渐变对象的开始圆的圆心坐标    
  
               *   radiusStart - 开始圆的半径    
  
               *   xEnd, yEnd - 放射性渐变对象的结束圆的圆心坐标    
  
               *   radiusEnd - 结束圆的半径    
  
               */    
  
              var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50);    
  
              radialGradient.addColorStop(0, "red");    
  
              radialGradient.addColorStop(0.5, "green");    
  
              radialGradient.addColorStop(1, "blue");    
  
              ctx.beginPath();    
  
              ctx.arc(150, 50, 50, 0, 2 * Math.PI, true);    
  
              ctx.fillStyle = radialGradient;    
  
              ctx.fill();    
  
          }    
  
          function clearIt() {    
  
              ctx.clearRect(0, 0, 200, 100);    
  
          }

#p#

4、贴图的平铺模式 | createPattern()
canvas/effect/pattern.html

 
 
   
  
     
  
     
  
     
  
      贴图的平铺模式   
  
     
  
     
  
         
  
          您的浏览器不支持 canvas 标签    
  
         
  
         
  
      Demo   
  
      清除画布   
  
         
  
          var ctx = document.getElementById('canvas').getContext('2d');    
  
          function drawIt() {    
  
              clearIt();    
  
              var img = new Image();    
  
              img.onload = function () {    
  
                  /*    
  
                   * context.createPattern(image, repetitionStyle) - 指定贴图的平铺模式    
  
                   *   image - 图像对象。除了支持 HTMLImageElement 外，还支持 HTMLCanvasElement 和 HTMLVideoElement    
  
                   *   repetitionStyle - 平铺模式（无论任何平铺模式，首图均在画布的左上角）    
  
                   *     no-repeat - 不平铺，只贴图一次，当然也是在画布的左上角    
  
                   *     repeat-x - x 轴方向上平铺图片    
  
                   *     repeat-y - y 轴方向上平铺图片    
  
                   *     repeat - x 轴和 y 轴方向均平铺图片    
  
                   */    
  
     
  
                  var pattern = ctx.createPattern(img, "no-repeat");    
  
                  ctx.fillStyle = pattern;    
  
                  ctx.strokeStyle = "blue";    
  
                  ctx.beginPath();    
  
                  ctx.rect(0, 0, 300, 300);    
  
                  ctx.fill();    
  
                  ctx.stroke();    
  
                  pattern = ctx.createPattern(img, "repeat-x");    
  
                  ctx.fillStyle = pattern;    
  
                  ctx.strokeStyle = "blue";    
  
                  ctx.beginPath();    
  
                  ctx.rect(320, 0, 300, 300);    
  
                  ctx.fill();    
  
                  ctx.stroke();    
  
                  pattern = ctx.createPattern(img, "repeat-y");    
  
                  ctx.fillStyle = pattern;    
  
                  ctx.strokeStyle = "blue";    
  
                  ctx.beginPath();    
  
                  ctx.rect(0, 320, 300, 300);    
  
                  ctx.fill();    
  
                  ctx.stroke();    
  
                  pattern = ctx.createPattern(img, "repeat");    
  
                  ctx.fillStyle = pattern;    
  
                  ctx.strokeStyle = "blue";    
  
                  ctx.beginPath();    
  
                  ctx.rect(320, 320, 300, 300);    
  
                  ctx.fill();    
  
                  ctx.stroke();    
  
              }    
  
              img.src = "http://res2.windows.microsoft.com/resbox/en/Windows%207/main/4300ae64-546c-4bbe-9026-6779b3684fb9_0.png";    
  
              // img.src = "http://www.cnblogs.com/assets/windows_logo.png";    
  
          }    
  
          function clearIt() {    
  
              ctx.clearRect(0, 0, 620, 620);    
  
          }

5、阴影效果 | shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
canvas/effect/shadow.html

 
 
   
  
     
  
     
  
     
  
      阴影效果   
  
     
  
     
  
         
  
          您的浏览器不支持 canvas 标签    
  
         
  
         
  
      Demo   
  
      清除画布   
  
         
  
          var ctx = document.getElementById('canvas').getContext('2d');    
  
          function drawIt() {    
  
              clearIt();    
  
              /*    
  
               * context.shadowOffsetX - 阴影相对于实体的水平偏移值    
  
               * context.shadowOffsetY - 阴影相对于实体的垂直偏移值    
  
               * context.shadowBlur - 阴影模糊程度。默认值是 0 ，即不模糊    
  
               * context.shadowColor - 阴影的颜色    
  
               */    
  
              ctx.shadowOffsetX = 5;    
  
              ctx.shadowOffsetY = 10;    
  
              ctx.shadowBlur = 10;    
  
              ctx.shadowColor = "rgba(0, 0, 255, 0.5)";    
  
              ctx.beginPath();    
  
              ctx.arc(120, 120, 100, 0, Math.PI * 2, true);    
  
              ctx.stroke();    
  
              ctx.fillRect(300, 300, 100, 100);    
  
          }    
  
          function clearIt() {    
  
              ctx.clearRect(0, 0, 480, 480);    
  
          }

6、全局 Alpha | globalAlpha
canvas/effect/globalAlpha.html

 
 
   
  
     
  
     
  
     
  
      全局 Alpha   
  
     
  
     
  
         
  
          您的浏览器不支持 canvas 标签    
  
         
  
         
  
      Demo   
  
      清除画布   
  
         
  
          var ctx = document.getElementById('canvas').getContext('2d');    
  
          function drawIt() {    
  
              clearIt();    
  
              /*    
  
               * context.globalAlpha - 设置全局的 alpha 值    
  
               */    
  
              ctx.globalAlpha = "0.5";    
  
              ctx.fillStyle = "red";    
  
              ctx.beginPath();    
  
              ctx.rect(20, 20, 100, 100);    
  
              ctx.fill();    
  
          }    
  
          function clearIt() {    
  
              ctx.clearRect(0, 0, 140, 140);    
  
          }

#p#

7、新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation
canvas/effect/globalCompositeOperation.html

 
 
   
  
     
  
     
  
     
  
      新颜色与画布当前已有颜色的合成方式

您的浏览器不支持 canvas 标签

改变 globalCompositeOperation

清除画布

var ctx = document.getElementById('canvas').getContext('2d');

var compositeOperationTypes = ['source-atop', 'source-in', 'source-out', 'source-over', 'destination-atop', 'destination-in', 'destination-out', 'destination-over', 'lighter', 'copy', 'xor'];

var index = 0;

function drawIt() {

clearIt();

ctx.fillStyle = "red";

ctx.beginPath();

ctx.rect(20, 20, 100, 100);

ctx.fill();

* context.globalCompositeOperation - 设置新颜色与画布当前已有颜色的合成方式

* source-atop - 保留已有颜色，然后绘制新颜色与已有颜色重合的部分

* source-in - 绘制新颜色与已有颜色重合的部分，其余全透明

* source-out - 绘制新颜色与已有颜色不重合的部分，其余全透明

* source-over - 在已有颜色的前面绘制新颜色。默认值

* destination-atop - 在已有颜色的后面绘制新颜色，然后保留已有颜色与新颜色重合的部分

* destination-in - 保留已有颜色与新颜色重合的部分，其余全透明

* destination-out - 保留已有颜色与新颜色不重合的部分，其余全透明

* destination-over - 在已有颜色的后面绘制新颜色

* lighter - 混合重叠部分的颜色

* copy - 删除已有颜色，只绘制新颜色

* xor - 透明化重叠部分的颜色

ctx.globalCompositeOperation = compositeOperationTypes[index];

document.getElementById("msg").innerHTML = ctx.globalCompositeOperation;

ctx.fillStyle = "blue";

ctx.beginPath();

ctx.rect(80, 80, 100, 100);

ctx.fill();

index++;

if (index >= compositeOperationTypes.length)

index = 0;

}

function clearIt() {

ctx.clearRect(0, 0, 200, 200);

// source-over 是 context.globalCompositeOperation 的默认值

ctx.globalCompositeOperation = "source-over";

}

8、保存画布上下文，以及恢复画布上下文 | save(), restore()
canvas/effect/save_restore.html

 
 
   
  
     
  
     
  
     
  
      保存画布上下文，以及恢复画布上下文   
  
     
  
     
  
      单击“save and draw”一次，然后单击“restore and draw”三次
   
  
         
  
          您的浏览器不支持 canvas 标签    
  
         
  
         
  
      save and draw   
  
      restore and draw   
  
         
  
          var ctx = document.getElementById('canvas').getContext('2d');    
  
          /*    
  
           * save() - 将画布的上下文压入堆栈    
  
           * restore() - 从堆栈中取一个画布的上下文，如果没有则什么都不做    
  
           */    
  
          function drawIt() {    
  
              clearIt();    
  
              ctx.strokeStyle = "red";    
  
              ctx.fillStyle = "green";    
  
              ctx.lineWidth = 5;    
  
              ctx.save(); // 将画布的上下文压入堆栈，此时堆栈中有一个画布上下文    
  
              drawRect1();    
  
              ctx.strokeStyle = "blue";    
  
              ctx.fillStyle = "yellow";    
  
              ctx.lineWidth = 10;    
  
              ctx.save(); // 将画布的上下文压入堆栈，此时堆栈中有两个画布上下文    
  
              drawRect2();    
  
          }    
  
          function restoreIt() {    
  
              clearIt();    
  
              ctx.restore(); // 按后进先出的顺序从堆栈里取画布上下文，如果取不到则什么都不做    
  
              drawRect1();    
  
              drawRect2();    
  
          }    
  
          function drawRect1() {    
  
              ctx.beginPath();    
  
              ctx.rect(20, 20, 100, 100);    
  
              ctx.stroke();    
  
              ctx.fill();    
  
          }    
  
          function drawRect2() {    
  
              ctx.beginPath();    
  
              ctx.rect(140, 20, 100, 100);    
  
              ctx.stroke();    
  
                 
                标题名称：HTML 5深入浅出教学篇之十一
                

                标题URL：http://www.mswzjz.cn/qtweb/news32/406032.html
            
            
                攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等
                                
            
                广告
                
            
            
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                贝锐智能