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

更新时间:2023-04-03 05:47:34 阅读：评论：0

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

xml/html code复制内容到剪贴板

varcanvas=docum安全驾驶知识ent.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 cod震撼的背景音乐e
复制内容到剪贴板

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’; //参考/d/file/titlepic/prop_canvasrenderingcontext2d_globalcompositeoperation.asp context.beginpath(); con电脑时间老是不对text.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); } }

本文发布于:2023-04-03 05:47:32，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/1008513f54ac24d74f6bb3d6363af127.html

本文word下载地址：HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例.doc

本文 PDF 下载地址：HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例.pdf

上一篇：男人喜欢你的30个表现，30岁男人喜欢你的征兆

下一篇：返回列表