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

XML/HTML Code复制内容到剪贴板 varcanvas=document.getElementById('canvas'); if(canvas.getContext){ varcontext=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) //翻转 varimg=newImage(); 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移动50y移动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); 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); }

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

XML/HTML Code复制内容到剪贴板 varcanvas=document.getElementById('canvas'); if(canvas.getContext){ varcontext=canvas.getContext('2d'); //线性绘制渐变 vargrd=context.createLinearGradient(0,0,200,100); //postion必须是0.1-1.0之间的竖直，表示渐变中颜色的地点相对地位，color表示颜色 grd.addColorStop(0.1,"#00ff00"); grd.addColorStop(0.8,"#ff0000"); context.fillStyle=grd; context.fillRect(0,0,200,100); //径向渐变 vargrd=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"; //只绘制新内容，删除其他所有内容 context.globalCompositeOperation='copy'; //图形重叠的地方，其颜色值相减后决定 context.globalCompositeOperation='darker'; //画布上已经有的内容只会载和其他图形重叠的地方保留 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(); //颜色翻转 varimg=newImage(); img.src='images/1.jpg'; img.onload=function(){ context.drawImage(img,0,0,1,1); varimgData=context.getImageData(0,0,1,1); varpixels=imgData.data; console.log(pixels); for(vari=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); } }

【HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例】相关文章：

★ HTML5 Canvas实现玫瑰曲线和心形图案的代码实例

★ HTML5 Plus 实现手机APP拍照或相册选择图片上传功能

★ 移动端HTML5实现文件上传功能【附代码】

★ html5 canvas实现圆形时钟代码分享

★ html5 更新图片颜色示例代码

★ HTML5 Canvas像素处理使用接口介绍

★ HTML5 Canvas旋转动画的2个代码例子

★ HTML5 canvas绘制的玫瑰花效果

★ html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因

★ 详解HTML5 Canvas绘制时指定颜色与透明度的方法