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 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
html5实现点击弹出图片功能
Jul 16 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
php session安全问题分析
2011/06/24 PHP
PHP 时间日期操作实战
2011/08/26 PHP
浅析php工厂模式
2014/11/25 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
Python中的ctime()方法使用教程
2015/05/22 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
实习会计求职自荐信范文
2014/03/10 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
逃课检讨书范文
2015/05/06 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python