网站建设好卖吗,网站设计要注意事项,特色美食网站建设策划书,徐州网站建设工作室Canvas-图片旋转 众所周知canvas是位图#xff0c;你可以在里面渲染你要的东西#xff0c;不过你只能操作canvas的属性来进行编辑。就是说你并不能操作画进canvas的东西#xff0c;例如我在canvas里添加一幅画#xff0c;我现在想将那幅画移动10px#xff0c;我们并不能直…Canvas-图片旋转 众所周知canvas是位图你可以在里面渲染你要的东西不过你只能操作canvas的属性来进行编辑。就是说你并不能操作画进canvas的东西例如我在canvas里添加一幅画我现在想将那幅画移动10px我们并不能直接操作那幅画因为我们根本获取不到那幅画的任何信息。我们永远只能获取到的是canvas对象。 那问题来了我要怎么旋转图片 其实canvas是提供了各种各样的接口去控制画布的旋转有rotate()方法。 其实这里的旋转并不是真的把这个画布旋转了例如我ctx.rotate(Math.PI/2)旋转90°了。并不是说我们在页面上就会看到canvas旋转了90°。我们可以理解为其实canvas是有两个部分组成的一个是肉眼看得到的画布一个是用于操作的虚拟画布我们所有在虚拟画布上的动作都会映射到真实画布中去。 这样说可能很难理解下面用图来解释一波。首先介绍一下rotate()方法先它可以旋转画布旋转点画布的原点而画布的原点默认是左上角。 下面在给大家看一下旋转45°所呈现的效果 在这里我们可以看到我刚刚所说的虚拟的画布旋转45°后再向虚拟的画布内插入图片然后真实画布所呈现的就是虚拟画布和真实画布相交的部分了。这里可能不太好理解大家仔细想想。 两张图的代码是这样的 // 未旋转 var img document.getElementById(img) var canvas document.getElementById(canvas) var ctx canvas.getContext(2d) ctx.drawImage(img, 0, 0) // 逆时针旋转45° var img document.getElementById(img) var canvas document.getElementById(canvas) var ctx canvas.getContext(2d) ctx.rotate(-Math.PI / 4); ctx.drawImage(img, 0, 0) 看到这里我想大家基本知道rotate()的使用方法了。 下面就来说说怎么实现再图片中心旋转 再说之前向给大家了解一下canvas的另外两个方法的用法 ctx.translate(x, y): 这个方法是可以移动画布原点的方法参数分别是xy ctx.drawImage(img, x, y)这个方法上面用过了不过里面是有三个参数的第一个是要插入的图片dom后面两个xy分别为插入图片时对img的位置进行修改。 从图可以看出要想实现围绕图片中心旋转45°就得把canvas的原点移动到这张图的中心再旋转canvas再就是插入图片时将图片往左上角平移图片自身的一半。 这里分别有三个步骤 移动canvas原点旋转canvas插入图片并移动 下面把这三个步骤分开看看图片的宽高为400和300 移动canvas原点 var img document.getElementById(img) var canvas document.getElementById(canvas) var ctx canvas.getContext(2d) ctx.translate(200, 150) ctx.drawImage(img, 0, 0) 旋转canvas var img document.getElementById(img) var canvas document.getElementById(canvas) var ctx canvas.getContext(2d) ctx.translate(200, 150) ctx.rotate(-Math.PI / 4) ctx.drawImage(img, 0, 0) 插入图片并移动 var img document.getElementById(img) var canvas document.getElementById(canvas) var ctx canvas.getContext(2d) ctx.translate(200, 150) ctx.rotate(-Math.PI / 4) ctx.drawImage(img, -200, -150) 这样就大功告成了 ps:大家再做完一系列动作后一定要将canvas的原点旋转复原。不然再经过一系列操作后canvas的设置会乱掉。每操作一次完成后都把设置恢复回原样就好了。 var img document.getElementById(img) var canvas document.getElementById(canvas) var ctx canvas.getContext(2d) ctx.translate(200, 150) // 1 ctx.rotate(-Math.PI / 4) // 2 ctx.drawImage(img, -200, -150) // 恢复设置恢复的步骤要跟你修改的步骤向反 ctx.rotate(Math.PI / 4) // 1 ctx.translate(-200, -150) // 2 // 之后canvas的原点又回到左上角旋转角度为0 // 其它操作... 还有一点要注意的我刚刚示范的是图片相对canvas x轴y轴为0所示范的例子如果不为0的情况下只需在移动原点的时候ctx.translate(200 x, 150 y)。这里的200和150是该图片的宽高的一半xy就是图片相对canvas的xy。 这篇文章讲的只是在图片中心旋转canvas-图片缩放教程。有写的不好或错误的地方望指出 更多专业前端知识请上 【猿2048】www.mk2048.com