這篇文章主要介紹了HTML5 Canvas實(shí)現(xiàn)圖片縮放、翻轉(zhuǎn)、顏色漸變的代碼示例,充分利用到了坐標(biāo)的操作,說(shuō)明都寫(xiě)在代碼注釋里了很簡(jiǎn)明,需要的朋友可以參考下

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

XML/HTML Code

var canvas = document.getElementById('canvas');   

if (canvas.getContext) {   

    var context = canvas.getContext('2d');   

    // 放大與縮小   

    context.beginPath();   

    context.strokeStyle = "#000000";   

    context.strokeRect(10,10,150,100);   

    // 放大3倍   

    context.scale(3,3);   

    context.beginPath();   

    context.strokeStyle = '#cccccc';   

    context.strokeRect(10,10,150,100)   

    // 縮小   

    context.scale(0.5,0.5);   

    context.beginPath();   

    context.strokeStyle = '#cccccc';   

    context.strokeRect(10,10,150,100)   

     // 翻轉(zhuǎn)   

    var img = new Image();   

    img.src = 'images/1.jpg';   

    img.onload = function(){   

        context.drawImage(img, 10,10);           

        context.scale(1, -1);   

        context.drawImage(img, 0, -500);   

    }   

    // 平移   

    context.beginPath();   

    context.strokeStyle = '#000000';   

    context.strokeRect(10,101,150,100);   

    // x移動(dòng) 50  y 移動(dòng)100   

    context.translate(50,100);   

    context.beginPath();   

    context.strokeStyle = '#cccccc';   

    context.strokeRect(10,10,150,100);   

    // 旋轉(zhuǎn)   

    context.beginPath();   

    context.strokeStyle = '#000000';   

    context.strokeRect(200,50,100,50);   

    // 默認(rèn)旋轉(zhuǎn)是根據(jù)0,0中心，使用translate可以按照自己的設(shè)置的中心旋轉(zhuǎn)   

    context.translate(250,75);   

    context.rotate(45 * Math.PI /180);   

    context.translate(-250, -75);   

    context.beginPath();   

    context.strokeStyle = '#cccccc';   

    context.strokeRect(200,50,100,50);   

    // transform 矩陣   

    context.beginPath();   

    context.strokeStyle = '#000000';   

    context.strokeRect(10,10,150,100);   

    context.transform(3,0,0,3,0,0);   

    context.beginPath();   

    context.strokeStyle = '#cccccc';   

    context.strokeRect(10,10,150,100);   

}  

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

XML/HTML Code

var canvas = document.getElementById('canvas');   

if (canvas.getContext) {   

    var context = canvas.getContext('2d');   

    // 線(xiàn)性繪制漸變   

    var grd = context.createLinearGradient(0,0,200,100);   

    // postion 必須是0.1-1.0之間的豎直，表示漸變中顏色的地點(diǎn)相對(duì)地位，color表示顏色   

    grd.addColorStop(0.1, "#00ff00");   

    grd.addColorStop(0.8, "#ff0000");   

    context.fillStyle = grd;   

    context.fillRect(0,0, 200,100);   

    // 徑向漸變   

    var grd = context.createRadialGradient(100,100,10,100,100,50);   

    grd.addColorStop(0.1, "#00ff00");   

    grd.addColorStop(0.8, '#ff0000');   

    context.fillStyle = grd;   

    context.fillRect(0,0,200,200);   

    // 圖像組合效果   

     context.fillStyle = '#00ff00';   

     context.fillRect(10,10,50,50);   

     // 新繪圖   

     //context.globalCompositeOperation  = "source-over";   

     // 只繪制新內(nèi)容，刪除其他所有內(nèi)容   

     context.globalCompositeOperation = 'copy';   

     // 圖形重疊的地方，其顏色值相減后決定   

     context.globalCompositeOperation = 'darker';   

     // 畫(huà)布上已經(jīng)有的內(nèi)容只會(huì)載和其他圖形重疊的地方保留   

     context.globalCompositeOperation = 'destination-atop';   

     // 參考 http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp   

     context.beginPath();   

     context.fillStyle = '#ff0000';   

     context.arc(50,50,30,0, 2 * Math.PI);   

     context.fill();   

     // 顏色翻轉(zhuǎn)   

     var img = new Image();   

     img.src = 'images/1.jpg';   

     img.onload = function(){   

         context.drawImage(img, 0,0, 1, 1);   

         var imgData = context.getImageData(0,0, 1,1);   

         var pixels = imgData.data;   

         console.log(pixels);   

         for(var i = 0, n = pixels.length; i < n; i+=4) {   

             pixels[i] = 255 - pixels[i];   

             pixels[i+1] = 255 - pixels[i + 1];   

             pixels[i+2] = 255 - pixels[i + 2];   

         }   

         context.putImageData(imgData, 250, 0);   

     }   

}