现实情况远非想的那么单纯容易清晰：当优越感逐渐转为失落感甚至挫败感时，当由坚信自己是一块金子到怀疑自己是一粒沙子时，愤怒，迷茫，自卑，焦急，躁动就开始与日俱增。
翻转、移动、平移、放大、缩小
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如何实现图片缩放、翻转、颜色渐变的代码示例内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！