欢乐颂,欢乐颂小说在线阅读

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

HTML 5深入淺出教學(xué)篇之十一

介紹

站在用戶的角度思考問題，與客戶深入溝通，找到云霄網(wǎng)站設(shè)計(jì)與云霄網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請(qǐng)域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋云霄地區(qū)。

HTML 5: 畫布（canvas）之效果

填充色, 筆劃色, 顏色值 | fillStyle, strokeStyle

剪裁 | clip()

漸變色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()

貼圖的平鋪模式 | createPattern()

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

全局 Alpha | globalAlpha

新顏色與畫布當(dāng)前已有顏色的合成方式 | globalCompositeOperation

保存畫布上下文，以及恢復(fù)畫布上下文 | save(), restore()

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

示例

1、填充色, 筆劃色, 顏色值 | fillStyle, strokeStyle
canvas/effect/color.html

 
 
   
  
     
  
     
  
     
  
      填充色, 筆劃色, 顏色值   
  
     
  
     
  
         
  
          您的瀏覽器不支持 canvas 標(biāo)簽    
  
         
  
         
  
      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 的區(qū)別    
  
              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 標(biāo)簽    
  
         
  
         
  
      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() - 只顯示當(dāng)前路徑所包圍的剪切區(qū)域    
  
               */    
  
              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 標(biāo)簽    
  
         
  
         
  
      Demo   
  
      清除畫布   
  
         
  
          var ctx = document.getElementById('canvas').getContext('2d');    
  
          function drawIt() {    
  
              clearIt();    
  
              /*    
  
               * context.createLinearGradient(xStart, yStart, xEnd, yEnd) - 創(chuàng)建線性漸變對(duì)象，并返回 CanvasGradient 類型的對(duì)象    
  
               *   xStart, yStart - 線性漸變對(duì)象的起始點(diǎn)坐標(biāo)    
  
               *   xEnd, yEnd - 線性漸變對(duì)象的結(jié)束點(diǎn)坐標(biāo)    
  
               *    
  
               * CanvasGradient.addColorStop(offset, color) - 新增一個(gè)漸變參考點(diǎn)    
  
               *   offset - 漸變參考點(diǎn)的位置，0.0 - 1.0 之間。起始點(diǎn)為 0，結(jié)束點(diǎn)為 1    
  
               *   color - 漸變參考點(diǎn)的顏色值     
  
               */    
  
              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) - 創(chuàng)建放射性漸變對(duì)象，并返回 CanvasGradient     
  
               *   xStart, yStart - 放射性漸變對(duì)象的開始圓的圓心坐標(biāo)    
  
               *   radiusStart - 開始圓的半徑    
  
               *   xEnd, yEnd - 放射性漸變對(duì)象的結(jié)束圓的圓心坐標(biāo)    
  
               *   radiusEnd - 結(jié)束圓的半徑    
  
               */    
  
              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 標(biāo)簽    
  
         
  
         
  
      Demo   
  
      清除畫布   
  
         
  
          var ctx = document.getElementById('canvas').getContext('2d');    
  
          function drawIt() {    
  
              clearIt();    
  
              var img = new Image();    
  
              img.onload = function () {    
  
                  /*    
  
                   * context.createPattern(image, repetitionStyle) - 指定貼圖的平鋪模式    
  
                   *   image - 圖像對(duì)象。除了支持 HTMLImageElement 外，還支持 HTMLCanvasElement 和 HTMLVideoElement    
  
                   *   repetitionStyle - 平鋪模式（無論任何平鋪模式，首圖均在畫布的左上角）    
  
                   *     no-repeat - 不平鋪，只貼圖一次，當(dāng)然也是在畫布的左上角    
  
                   *     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 標(biāo)簽    
  
         
  
         
  
      Demo   
  
      清除畫布   
  
         
  
          var ctx = document.getElementById('canvas').getContext('2d');    
  
          function drawIt() {    
  
              clearIt();    
  
              /*    
  
               * context.shadowOffsetX - 陰影相對(duì)于實(shí)體的水平偏移值    
  
               * context.shadowOffsetY - 陰影相對(duì)于實(shí)體的垂直偏移值    
  
               * context.shadowBlur - 陰影模糊程度。默認(rèn)值是 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 標(biāo)簽    
  
         
  
         
  
      Demo   
  
      清除畫布   
  
         
  
          var ctx = document.getElementById('canvas').getContext('2d');    
  
          function drawIt() {    
  
              clearIt();    
  
              /*    
  
               * context.globalAlpha - 設(shè)置全局的 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、新顏色與畫布當(dāng)前已有顏色的合成方式 | globalCompositeOperation
canvas/effect/globalCompositeOperation.html

 
 
   
  
     
  
     
  
     
  
      新顏色與畫布當(dāng)前已有顏色的合成方式

您的瀏覽器不支持 canvas 標(biāo)簽

改變 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 - 設(shè)置新顏色與畫布當(dāng)前已有顏色的合成方式

* source-atop - 保留已有顏色，然后繪制新顏色與已有顏色重合的部分

* source-in - 繪制新顏色與已有顏色重合的部分，其余全透明

* source-out - 繪制新顏色與已有顏色不重合的部分，其余全透明

* source-over - 在已有顏色的前面繪制新顏色。默認(rèn)值

* 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 的默認(rèn)值

ctx.globalCompositeOperation = "source-over";

}

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

 
 
   
  
     
  
     
  
     
  
      保存畫布上下文，以及恢復(fù)畫布上下文   
  
     
  
     
  
      單擊“save and draw”一次，然后單擊“restore and draw”三次
   
  
         
  
          您的瀏覽器不支持 canvas 標(biāo)簽    
  
         
  
         
  
      save and draw   
  
      restore and draw   
  
         
  
          var ctx = document.getElementById('canvas').getContext('2d');    
  
          /*    
  
           * save() - 將畫布的上下文壓入堆棧    
  
           * restore() - 從堆棧中取一個(gè)畫布的上下文，如果沒有則什么都不做    
  
           */    
  
          function drawIt() {    
  
              clearIt();    
  
              ctx.strokeStyle = "red";    
  
              ctx.fillStyle = "green";    
  
              ctx.lineWidth = 5;    
  
              ctx.save(); // 將畫布的上下文壓入堆棧，此時(shí)堆棧中有一個(gè)畫布上下文    
  
              drawRect1();    
  
              ctx.strokeStyle = "blue";    
  
              ctx.fillStyle = "yellow";    
  
              ctx.lineWidth = 10;    
  
              ctx.save(); // 將畫布的上下文壓入堆棧，此時(shí)堆棧中有兩個(gè)畫布上下文    
  
              drawRect2();    
  
          }    
  
          function restoreIt() {    
  
              clearIt();    
  
              ctx.restore(); // 按后進(jìn)先出的順序從堆棧里取畫布上下文，如果取不到則什么都不做    
  
              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();    
  
                                                     

                                                網(wǎng)站名稱：HTML 5深入淺出教學(xué)篇之十一                                                

                                                分享鏈接：http://m.fisionsoft.com.cn/article/ccojgij.html

新聞中心

其他資訊