DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5 Canvas實現圖片縮放、翻轉、顏色漸變的代碼示例
HTML5 Canvas實現圖片縮放、翻轉、顏色漸變的代碼示例
編輯:HTML5詳解     

翻轉、移動、平移、放大、縮小

XML/Html Code復制內容到剪貼板
  1. var canvas = document.getElementById('canvas');   
  2. if (canvas.getContext) {   
  3.     var context = canvas.getContext('2d');   
  4.     // 放大與縮小   
  5.     context.beginPath();   
  6.     context.strokeStyle = "#000000";   
  7.     context.strokeRect(10,10,150,100);   
  8.         
  9.     // 放大3倍   
  10.     context.scale(3,3);   
  11.     context.beginPath();   
  12.     context.strokeStyle = '#cccccc';   
  13.     context.strokeRect(10,10,150,100)   
  14.         
  15.     // 縮小   
  16.     context.scale(0.5,0.5);   
  17.     context.beginPath();   
  18.     context.strokeStyle = '#cccccc';   
  19.     context.strokeRect(10,10,150,100)   
  20.         
  21.      // 翻轉   
  22.     var img = new Image();   
  23.     img.src = 'images/1.jpg';   
  24.     img.onload = function(){   
  25.         context.drawImage(img, 10,10);           
  26.         context.scale(1, -1);   
  27.         context.drawImage(img, 0, -500);   
  28.     }   
  29.     // 平移   
  30.     context.beginPath();   
  31.     context.strokeStyle = '#000000';   
  32.     context.strokeRect(10,101,150,100);   
  33.     // x移動 50  y 移動100   
  34.     context.translate(50,100);   
  35.     context.beginPath();   
  36.     context.strokeStyle = '#cccccc';   
  37.     context.strokeRect(10,10,150,100);   
  38.     // 旋轉   
  39.     context.beginPath();   
  40.     context.strokeStyle = '#000000';   
  41.     context.strokeRect(200,50,100,50);   
  42.     // 默認旋轉是根據0,0中心,使用translate可以按照自己的設置的中心旋轉   
  43.     context.translate(250,75);   
  44.        
  45.     context.rotate(45 * Math.PI /180);   
  46.     context.translate(-250, -75);   
  47.   
  48.     context.beginPath();   
  49.     context.strokeStyle = '#cccccc';   
  50.     context.strokeRect(200,50,100,50);   
  51.         
  52.     // transform 矩陣   
  53.     context.beginPath();   
  54.     context.strokeStyle = '#000000';   
  55.     context.strokeRect(10,10,150,100);   
  56.        
  57.     context.transform(3,0,0,3,0,0);   
  58.     context.beginPath();   
  59.     context.strokeStyle = '#cccccc';   
  60.     context.strokeRect(10,10,150,100);   
  61.         
  62. }  

漸變、圖像組合效果、顏色翻轉

XML/Html Code復制內容到剪貼板
  1. var canvas = document.getElementById('canvas');   
  2. if (canvas.getContext) {   
  3.     var context = canvas.getContext('2d');   
  4.     // 線性繪制漸變   
  5.     var grd = context.createLinearGradIEnt(0,0,200,100);   
  6.     // postion 必須是0.1-1.0之間的豎直,表示漸變中顏色的地點相對地位,color表示顏色   
  7.     grd.addColorStop(0.1, "#00ff00");   
  8.     grd.addColorStop(0.8, "#ff0000");   
  9.        
  10.     context.fillStyle = grd;   
  11.     context.fillRect(0,0, 200,100);   
  12.     // 徑向漸變   
  13.     var grd = context.createRadialGradIEnt(100,100,10,100,100,50);   
  14.     grd.addColorStop(0.1, "#00ff00");   
  15.     grd.addColorStop(0.8, '#ff0000');   
  16.     context.fillStyle = grd;   
  17.     context.fillRect(0,0,200,200);   
  18.     // 圖像組合效果   
  19.      context.fillStyle = '#00ff00';   
  20.      context.fillRect(10,10,50,50);   
  21.      // 新繪圖   
  22.      //context.globalCompositeOperation  = "source-over";   
  23.      // 只繪制新內容,刪除其他所有內容   
  24.      context.globalCompositeOperation = 'copy';   
  25.      // 圖形重疊的地方,其顏色值相減後決定   
  26.      context.globalCompositeOperation = 'darker';   
  27.      // 畫布上已經有的內容只會載和其他圖形重疊的地方保留   
  28.      context.globalCompositeOperation = 'destination-atop';   
  29.      // 參考 http://www.w3school.com.cn/Htmldom/prop_canvasrenderingcontext2d_globalcompositeOperation.ASP   
  30.      context.beginPath();   
  31.      context.fillStyle = '#ff0000';   
  32.      context.arc(50,50,30,0, 2 * Math.PI);   
  33.      context.fill();   
  34.         
  35.      // 顏色翻轉   
  36.      var img = new Image();   
  37.           
  38.      img.src = 'images/1.jpg';   
  39.      img.onload = function(){   
  40.          context.drawImage(img, 0,0, 1, 1);   
  41.          var imgData = context.getImageData(0,0, 1,1);   
  42.          var pixels = imgData.data;   
  43.          console.log(pixels);   
  44.          for(var i = 0, n = pixels.length; i < n; i+=4) {   
  45.              pixels[i] = 255 - pixels[i];   
  46.              pixels[i+1] = 255 - pixels[i + 1];   
  47.              pixels[i+2] = 255 - pixels[i + 2];   
  48.          }   
  49.          context.putImageData(imgData, 250, 0);   
  50.      }   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved