欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5 Canvas實(shí)現(xiàn)圖片縮放、翻轉(zhuǎn)、顏色漸變的代碼示例

OSChina   發(fā)布時(shí)間：2016-02-28 11:46:16   作者：常思過(guò)   我要評(píng)論
這篇文章主要介紹了HTML5 Canvas實(shí)現(xiàn)圖片縮放、翻轉(zhuǎn)、顏色漸變的代碼示例,充分利用到了坐標(biāo)的操作,說(shuō)明都寫在代碼注釋里了很簡(jiǎn)明,需要的朋友可以參考下

翻轉(zhuǎn)、移動(dòng)、平移、放大、縮小

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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.      // 翻轉(zhuǎn)   
  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移動(dòng) 50  y 移動(dòng)100   
  34.     context.translate(50,100);   
  35.     context.beginPath();   
  36.     context.strokeStyle = '#cccccc';   
  37.     context.strokeRect(10,10,150,100);   
  38.     // 旋轉(zhuǎn)   
  39.     context.beginPath();   
  40.     context.strokeStyle = '#000000';   
  41.     context.strokeRect(200,50,100,50);   
  42.     // 默認(rèn)旋轉(zhuǎn)是根據(jù)0,0中心，使用translate可以按照自己的設(shè)置的中心旋轉(zhuǎn)   
  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. }  

漸變、圖像組合效果、顏色翻轉(zhuǎn)

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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之間的豎直，表示漸變中顏色的地點(diǎn)相對(duì)地位，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.      // 只繪制新內(nèi)容，刪除其他所有內(nèi)容   
  24.      context.globalCompositeOperation = 'copy';   
  25.      // 圖形重疊的地方，其顏色值相減后決定   
  26.      context.globalCompositeOperation = 'darker';   
  27.      // 畫布上已經(jīng)有的內(nèi)容只會(huì)載和其他圖形重疊的地方保留   
  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.      // 顏色翻轉(zhuǎn)   
  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.      }   
  51. }  

相關(guān)文章

最新評(píng)論