本文主要介绍了htm5l 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): 这个方法是可以移动画布原点的方法，参数分别是x，y；

ctx.drawImage(img, x, y)：这个方法上面用过了，不过里面是有三个参数的，第一个是要插入的图片dom，后面两个x，y分别为插入图片时对img的位置进行修改。

从图可以看出，要想实现围绕图片中心旋转45°，就得把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是该图片的宽高的一半，x，y就是图片相对canvas的x，y

相关推荐：

本文主要介绍了纯CSS实现波浪移动效果的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

在某些页面上常常看到波浪的效果，虽然只有装饰的作用，但是却让页面看上去更生动了，同时某些情况下也能起到进度条的作用，而波浪的形式却比普通进度条更美观有趣。

如果想要实现波浪的效果，作者想到的第一个方法是通过 canvas 绘制波浪，然后用帧动画让波浪运动起来。这种方式实现的波浪效果应该是最好的，能够实现很多细节，比如控制波峰的高度、改变波浪的数量、根据前一个波浪的高度计算后一个波浪的高度等等。

但是往往需求并不会这么复杂，产品经理和设计想要的只是一个看上去还比较美观的波浪效果而已。如果用 canvas 去做，就实在是大材小用了，耗时耗力。所以这种情况下，就可以尝试使用 css 来完成这个小需求。

分析波浪效果

上面是作者完成的波浪效果的其中一种（不会做 gif，就用多张图片拼贴在一起代替吧），它有两个波峰，这两个波峰动起来时，会有一种向右推进的效果。我们先一个一个来看，如果要实现一个波峰，我们应该怎么做？

波峰具有弧度，在 css 中能够实现弧度效果的是border-raduis这个属性；而对于向右推进的效果，单个来看的话，其实可以理解为是旋转动画，我们可以通过animation来实现。

// html <p class="wave"></p> // style .wave { width: 300px; height: 300px; border-raduis: 50%; background: blue; }