html5 Canvas实现图片旋转的示例


Posted in HTML / CSS onJanuary 15, 2018

众所周知canvas是位图,你可以在里面渲染你要的东西,不过你只能操作canvas的属性来进行编辑。就是说你并不能操作画进canvas的东西,例如我在canvas里添加一幅画,我现在想将那幅画移动10px,我们并不能直接操作那幅画,因为我们根本获取不到那幅画的任何信息。我们永远只能获取到的是canvas对象。

那问题来了,我要怎么旋转图片

其实canvas是提供了各种各样的接口去控制画布的,旋转有rotate()方法。

其实这里的旋转并不是真的把这个画布旋转了,例如我ctx.rotate(Math.PI/2)旋转90°了。并不是说我们在页面上就会看到canvas旋转了90°。我们可以理解为其实canvas是有两个部分组成的,一个是肉眼看得到的画布,一个是用于操作的虚拟画布,我们所有在虚拟画布上的动作都会映射到真实画布中去。

这样说可能很难理解,下面用图来解释一波。首先介绍一下rotate()方法先,它可以旋转画布,旋转点画布的原点,而画布的原点默认是左上角。

html5 Canvas实现图片旋转的示例

下面在给大家看一下旋转45°所呈现的效果:

html5 Canvas实现图片旋转的示例

在这里我们可以看到我刚刚所说的虚拟的画布旋转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,再就是插入图片时将图片往左上角平移图片自身的一半。

这里分别有三个步骤:

  1. 移动canvas原点
  2. 旋转canvas
  3. 插入图片并移动

html5 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)

html5 Canvas实现图片旋转的示例

旋转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)

html5 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, -200, -150)

html5 Canvas实现图片旋转的示例

这样就大功告成了

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

这篇文章讲的只是在图片中心旋转,之后我会写旋转搭配图片的缩放。有写的不好或错误的地方,望指出

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
css3绘制天猫logo实现代码
Nov 06 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 #HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 #HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 #HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 #HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 #HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 #HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 #HTML / CSS
You might like
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
vuex提交state&&实时监听state数据的改变方法
2018/09/16 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
python3之微信文章爬虫实例讲解
2017/07/12 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
python getpass实现密文实例详解
2019/09/24 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
保研推荐信
2014/05/09 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang