作为web开发者，我一直在和HTML5 canvas元素打交道。渲染图片是一个大的分支，十分重要而且很常用，所以,今天的教程是关于画布图像展示以及如何旋转图像，说不定是你现在真正想要的好东西。

       总的来说，canvas旋转有两种方式：中心旋转和参照点旋转。熟练应用旋转功能，对你的开发作品会有极大的帮助。

 

 

 

       关于对象的中心旋转

       第一个类型的旋转，我们要看看是对其中心旋转一个对象。实现使用画布元素，这是一个最简单的旋转类型。我们把一只大猩猩的图片作为素材进行试验。

       基本的想法是,我们要把帆布按照一个中心点旋转,旋转画布,然后把画布回到原来的位置。如果你有一些经验关于图形引擎，那么这听起来应该很熟悉。代码大概就是这样：

myImage = new Image(); myImage.onload = function() { var xpos = 300; var ypos = 200; ctx.save(); ctx.translate(xpos, ypos); ctx.rotate(47 * Math.PI / 180); ctx.translate(-xpos, -ypos); ctx.drawImage(myImage, xpos - myImage.width / 2, ypos - myImage.height / 2); ctx.restore(); } myImage.src = 'image.png';

注释已经非常详细，但我仍旧想提一点：.save()和.restore()。他们的作用是保存旋转之前的画布，然后旋转后恢复。有效地避免了和其他渲染冲突，十分关键，许多朋友没有顺利进行旋转，大多都是这个原因。

围绕某个点旋转

       第二个类型是图像围绕空间的某个点进行旋转，这将变得比较复杂。可为什么要这样做呢？很多情况下，你需要把对象参照另一个对象旋转，单一的围绕中心旋转无法满足需求。而且后者会更常用，比如在做网页游戏中，经常会用到旋转。

// regular rotation about point myImage = new Image(); myImage.onload = function() { // regular rotation about a point var angle = 124 * Math.PI / 180; var rx = 300, ry = 200; var px = 300, py = 50; var radius = ry - py; var dx = rx + radius * Math.sin(angle); var dy = ry - radius * Math.cos(angle); ctx.save(); ctx.translate(dx, dy); ctx.rotate(angle); ctx.translate(-dx, -dy); ctx.drawImage(myImage, dx - myImage.width / 2, dy - myImage.height / 2); ctx.restore(); } myImage.src = 'smallimage.png';

        代码简洁，作用是把一张图片按照一个点旋转了124度，下面这张图片更形象。

       这里有完整的源码：

       HTML5Party编辑整理，转载请注明出处！