canvas中心旋转,html5画布图形旋转
作为一名web开发人员，我一直在处理HTML5 canvas元素。渲染是一个很大的分支，很重要，也很常用。所以今天的教程是关于画布图像的显示以及如何旋转图像。也许是你现在真正想要的东西。
一般来说，旋转画布有两种方式：中心旋转和参考点旋转。旋转功能的熟练应用会对你的开发作品有很大的帮助。
关于对象的中心旋转第一种旋转，我们要看它是不是绕着一个物体的中心旋转。实现画布元素，这是最简单的旋转类型。我们用一张大猩猩的照片做实验。
基本思路是，我们要按照一个中心点来旋转画布，旋转画布，然后让画布回到原来的位置。如果你有一些图形引擎的经验，那么这应该听起来很熟悉。大概是这样的代码：(点击看效果)
代码将内容复制到剪贴板functiononload(){ var canvas=document . getelementbyid( C1 )；var CTX 1=canvas . get context( 2d )；varimage 1=new image()；image1 . onload=function(){//regulartrotationaboutcenter var xpos=canvas . width/2；varypos=canvas . height/2；ctx1.drawImage(image1，xpos-image1.width/2，ypos-image1 . height/2)；CTX 1 . save()；ctx1.translate(xpos，ypos)；CTX 1 . rotate(47 *数学。PI/180)；//旋转47度ctx1.translate(-xpos，-ypos)；ctx1.drawImage(image1，xpos-image1.width/2，ypos-image1 . height/2)；CTX 1 . restore()；} image1 . src= image . png ；}
评论很详细，但我还是想提一下：保存()和。还原()。它们的作用是在旋转之前保存画布，然后在旋转之后恢复画布。有效避免与其他效果图的冲突是非常重要的。很多朋友轮换不顺利，大多是这个原因。
围绕某个点旋转第二种是图像围绕空间中的一点旋转，会变得更加复杂。但是为什么要这么做呢？在许多情况下，您需要参考另一个对象旋转一个对象，但围绕中心的单一旋转无法满足需求。而后者会更常用，比如在网页游戏中，经常会用到旋转。
将JavaScript代码内容编码到剪贴板
function onload(){ varcanvas 2=document . getelementbyid( C2 )；var CTX 2=can vas 2 . get context( 2d )；//regulartrotationabotpoint varimage 2=new image()；image2 . onload=function(){//regulartrotationaboutapoint varangle=120 * Math。PI/180；//angleofrotationinradians varrx=300，ry=200//therotationxandy varpx=300，py=50//theobjectscenterxandy varradius=ry-py；//thedifferenceinypositionsortheradius vardx=rx radius * math . sin(angle)；//the drawx vardy=ry-radius * math . cos(angle)；//the drawy CT x2 . draw image(image 2，300-image2.width/2，50-image 2 . height/2)；CT x2 . begin path()；ctx2.arc(300，200，5，0，数学。PI*2，假)；CT x2 . close path()；ctx2.fillStyle=rgba(0，255，0，0.25)；CT x2 . fill()；CT x2 . save()；ctx2.translate(dx，dy)；ctx2.rotate(角度)；ctx2.translate(-dx，-dy)；ctx2.drawImage(image2，dx-image2.width/2，dy-image 2 . height/2)；CT x2 . restore()；} image2 . src= small image . png ；}
代码简洁，功能是将一张图片按照一个点旋转120度，这张图片更生动。
绘制魔性Logo我在度娘身上看到一个logo，熟练的运用了旋转变换。用一个很简单的长方形，通过旋转变换，变成了一个漂亮的logo。这个logo是不是很神奇？童鞋们开动脑筋，努力实现。下面，提供我实现它的代码。
将JavaScript代码内容编码到剪贴板！type html html lang= zh head meta charaset= utf-8 title draw magic logo/title style body { background:URL(。/images/bg3.jpg )重复；} # canvas { border:1 px solid # aaaaaa；显示：块；保证金：50pxauto}/style/headbydivid= Canvas-warp Canvas id= Canvas 你的浏览器不支持Canvas？赶紧换！/canvas /div脚本window . onload=function(){ var canvas=document . getelementbyid( canvas )；canvas.width=800canvas.height=600var context=canvas . get context( 2d )；context . fill style= # FFF ；context.fillRect(0，0，800，600)；for(vari=1；i=10I){ context . save()；context.translate(400，300)；context.rotate(36*i*Math。PI/180)；context.fillStyle=rgba(255，0，0，0.25)；context.fillRect(0，-200，200，200)；context . restore()；} };/script/body/html运行结果：
是不是很爽？稍微分析一下这个图形，其实挺简单的，就是让一个直立的形状绕着屏幕的中点(也就是初始正方形左下角的顶点)旋转。
艺术不是很精彩吗？大家一定都体会到了Canvas的奇妙，简单的几行代码就能达到无穷无尽的效果。只要脑洞够大，没有什么是不可能的。所以，举起我们艺人的大旗，加快脚步，继续前进！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。