源美网站建设,做柜子网站,线上投票链接制作,建网站的平台摘要#xff1a;这篇HTML5栏目下的“详解如何用HTML5 Canvas API控制图片的缩放变换”#xff0c;介绍的技术点是“html5_canvas、canvas、Html5、控制图片、api、图片”#xff0c;希望对大家开发技术学习和问题解决有帮助。缩放变换scale(sx,sy)传入两个参数#xff0c;分…摘要这篇HTML5栏目下的“详解如何用HTML5 Canvas API控制图片的缩放变换”介绍的技术点是“html5_canvas、canvas、Html5、控制图片、api、图片”希望对大家开发技术学习和问题解决有帮助。缩放变换scale(sx,sy)传入两个参数分别是水平方向和垂直方向上对象的缩放倍数。例如context.scale(2,2)就是对图像放大两倍。其实看上去简单实际用起来还是有一些问题的。我们来看一段代码JavaScript Code复制内容到剪贴板html缩放变换body { background: url(./images/bg3.jpg) repeat; }#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }你的浏览器居然不支持Canvas赶快换一个吧window.onload function(){varcanvas document.getElementById(canvas);canvas.width 800;canvas.height 600;varcontext canvas.getContext(2d);context.fillStyle #FFF;context.fillRect(0,0,800,600);context.strokeStyle red;context.lineWidth 5;for(vari 1; i context.save();context.scale(i,i);context.strokeRect(50,50,150,100);context.restore();}};运行结果其实缩放很简单稍微复杂的是如何让鼠标成为放大或者缩小的中心。如果数学几何不好计算公式就可能看不明白了。JavaScript Code复制内容到剪贴板canvas.onmousewheelcanvas.οnwheelfunction(event){//chrome firefox浏览器兼容varposwindowToCanvas(canvas,event.clientX,event.clientY);event.wheelDeltaevent.wheelDelta?event.wheelDelta:(event.deltaY*(-40));if(event.wheelDelta0){imgScale*2;imgXimgX*2-pos.x;imgYimgY*2-pos.y;}else{imgScale/2;imgXimgX*0.5pos.x*0.5;imgYimgY*0.5pos.y*0.5;}drawImage();}这个时候基本功能就实现了加载一张图片和加载多张图片都差不多维护每一张图片的位置和大小下面来整理一下代码吧。JavaScript Code复制内容到剪贴板varcanvas,context;varimg,//图片对象imgIsLoaded,//图片是否加载完成;imgX0,imgY0,imgScale1;(functionint(){canvasdocument.getElementById(canvas);contextcanvas.getContext(2d);loadImg();})();functionloadImg(){imgnewImage();img.οnlοadfunction(){imgIsLoadedtrue;drawImage();}img.srcmap.jpg;}functiondrawImage(){context.clearRect(0,0,canvas.width,canvas.height);context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);}canvas.οnmοusedοwnfunction(event){varposwindowToCanvas(canvas,event.clientX,event.clientY);canvas.οnmοusemοvefunction(event){canvas.style.cursormove;varpos1windowToCanvas(canvas,event.clientX,event.clientY);varxpos1.x-pos.x;varypos1.y-pos.y;pospos1;imgXx;imgYy;drawImage();}canvas.οnmοuseupfunction(){canvas.οnmοusemοvenull;canvas.οnmοuseupnull;canvas.style.cursordefault;}}canvas.onmousewheelcanvas.οnwheelfunction(event){varposwindowToCanvas(canvas,event.clientX,event.clientY);event.wheelDeltaevent.wheelDelta?event.wheelDelta:(event.deltaY*(-40));if(event.wheelDelta0){imgScale*2;imgXimgX*2-pos.x;imgYimgY*2-pos.y;}else{imgScale/2;imgXimgX*0.5pos.x*0.5;imgYimgY*0.5pos.y*0.5;}drawImage();}functionwindowToCanvas(canvas,x,y){varbbox canvas.getBoundingClientRect();return{x:x - bbox.left - (bbox.width - canvas.width) / 2,y:y - bbox.top - (bbox.height - canvas.height) / 2};}缩放变换应注意的问题看了上面的例子大家一定对产生的结果有点奇怪。一是左上角顶点的坐标变了而是线条的粗细也变了。因此对于缩放变换有两点问题需要注意缩放时图像左上角坐标的位置也会对应缩放。缩放时图像线条的粗细也会对应缩放。比如对于最小的那个原始矩形它左上角的坐标是(5050)线条宽度是5px但是放大2倍后左上角坐标变成了(100100)线条宽度变成了10px。这就是缩放变换的副作用。童鞋们一定在期待着我说解决副作用的途径。很遗憾没有什么好的方法去解决这些副作用。如果想固定左上角坐标缩放可以把左上角坐标变成(00)这样的话无论是什么倍数0乘上它还是0所以不变。如果不想让线条粗细变化那就别使用线条。或者自己封装一个函数不要使用scale()。究其根本之前我们说过平移变换、旋转变换、缩放变换都属于坐标变换或者说是画布变换。因此缩放并非缩放的是图像而是整个坐标系、整个画布就像是对坐标系的单位距离缩放了一样所以坐标和线条都会进行缩放。仔细想想这一切貌似挺神奇的。
