渐变HTML5 Canvas实现图片缩放、翻转、颜色渐变代码示例

★精品文档★

HTML5 Canvas实现图片缩放、翻转、颜色

渐变代码示例

这篇文章主要介绍了 HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例,充分利用到了坐标的操作,说明都写在代码注释里了很简明,需要的朋友可以参考下

翻转、移动、平移、放大、缩小

XML/HTML Codevar 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’ ;

1/9

★精品文档★

  

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

   //缩小  

  context.scale(0.5,0.5);  

  context.beginPath();  

    context.strokeStyle = ‘#cccccc’ ;  

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

   //翻转  

  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);  

   }  

   //平移  

2/9

★精品文档★

  context.beginPath();  

    context.strokeStyle = ‘#000000’ ;  

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

    // x移动 50  y移动 100  

  context.translate(50,100);  

  context.beginPath();  

    context.strokeStyle = ‘#cccccc’ ;  

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

   //旋转  

  context.beginPath();  

    context.strokeStyle = ‘#000000’ ;  

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

    //默认旋转是根据0,0 中心使用translate可以按照自己的设置的中心旋转  

  context.translate(250,75);  

3/9

★精品文档★

    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);  

4/9

★精品文档★

} 

渐变、 图像组合效果、颜色翻转

XML/HTML Codevar canvas = document.getElementById(‘canvas’);  if (canvas.getContext) {  

   var context = canvas.getContext(‘2d’);  

   //线性绘制渐变  

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

   // postion必须是0.1-1 .0之间的竖直表示渐变中颜色的地点相对地位 color表示颜色  

    grd.addColorStop(0.1 , “#00ff00”);  

    grd.addColorStop(0.8, “#ff0000”);  

  context.fi l lStyle=grd;  

    context.fi l lRect(0,0, 200,100);  

   //径向渐变  

5/9

★精品文档★

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

    grd.addColorStop(0.1 , “#00ff00”);  

    grd.addColorStop(0.8, ‘#ff0000’);  

  context.fi l lStyle=grd;  

    context.fi l lRect(0,0,200,200);  

   //图像组合效果  

     context.fi l lStyle = ‘#00ff00’ ;  

     context.fi l lRect(10,10,50,50);  

   //新绘图  

    //context.globalCompositeOperation  =“source-over”;  

     //只绘制新内容删除其他所有内容  

   

6/9

★精品文档★

 context.globalCompositeOperation = ‘copy’ ;  

     //图形重叠的地方其颜色值相减后决定  

    context.globalCompositeOperation = ‘darker’ ;  

     //画布上已经有的内容只会载和其他图形重叠的地方保留  

    context.globalCompositeOperation =‘destination-atop’ ;  

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

     context.beginPath();  

     context.fi l lStyle = ‘#ff0000’ ;  

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

   context.fi l l();  

7/9

★精品文档★

   //颜色翻转  

     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];  

8/9

★精品文档★

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

     }  

        context.putImageData(imgData, 250, 0);  

   }  

} 

9/9