Canvas旋转图片--保持相同大小的算法
function drawImg(angle)
{
canvas.width = canvas.width;
var distance = size / 2 * Math.sqrt(2) * Math.sin(angle * Math.PI / 180 / 2) * 2;
var degree = 180 - 45 - (180 - angle) / 2;
var x = distance * Math.sin(degree * Math.PI / 180);
var y = distance * Math.cos(degree * Math.PI / 180);
ctx.translate(x, -y);
var angleInRadians = angle * Math.PI / 180;
ctx.rotate(angleInRadians);
ctx.drawImage(img, 0, 0, 32, 32);
ctx.restore();
}
第一步是清空画板,重点是找到旋转后图片相原方的中心,其计算公式是我自己写的。计算distnace那个。
版权声明:本文博客原创文章,博客,未经同意,不得转载。
Canvas旋转图片--保持相同大小的算法的更多相关文章
- canvas旋转图片
canvas旋转图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- Camera图片特效处理综述(Bitmap的Pixels处理、Canvas/paint的drawBitmap处理、旋转图片、裁截图片、播放幻灯片浏览图片<线程固定时间显示一张>)
一种是直接对Bitmap的像素进行操作,如:叠加.边框.怀旧.(高斯)模糊.锐化(拉普拉斯变换). Bitmap.getPixels(srcPixels, 0, width, 0, 0, width, ...
- 赵雅智_运用Bitmap和Canvas实现图片显示,缩小,旋转,水印
上一篇已经介绍了Android种Bitmap和Canvas的使用,以下我们来写一个详细实例 http://blog.csdn.net/zhaoyazhi2129/article/details/321 ...
- 土旦:移动端 Vue+Vant 的Uploader 实现 :上传、压缩、旋转图片
面向百度开发 html <van-uploader :after-read="onRead" accept="image/*"> <img s ...
- HTML5 file API加canvas实现图片前端JS压缩并上传
一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...
- 用canvas实现图片滤镜效果详解之灰度效果
前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...
- [JavaScript] canvas 合成图片和文字
Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...
- vue 添加旋转图片 修改css transform 值
//点击放大图片并旋转图片 conponents组建 <template> <!-- 过渡动画 --> <transition name="fade ...
- Canvas 实现图片合成并下载合成图片
现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...
随机推荐
- 移动web:转盘抽奖(幸运大转盘)
为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...).... ...
- Directx11学习笔记【十六】 光照模型的实现
本文由zhangbaochong原创,转载请注明出处http://www.cnblogs.com/zhangbaochong/p/5579289.html 在之前的场景绘制中我们都是给每个顶点指定了单 ...
- Java模式(适配器型号)
今天阅读Java该适配器模式,这里有一个小的总结和下谈感受.对于将来使用. 首先.让我们有关适配器先说说. 适应是“来源”至“目标”适应.其中连接这两个的关系是适配器.它负责“源”过度到“目标”. 举 ...
- 【android】优秀的UI资源站点集合
1.http://ionicons.com/ 这个站点的图标能满足大部分人的需求.里面包括了经常使用的android风格的图标 ios7风格的图标 以及一些社会化分享图标,总共500个左右.githu ...
- 推断序列的端部的大小C规划
概念 big-endian格式:高字节字符数据被存储在低地址.字数据的低字节存放在高地址. 小尾数格式:相较于大端存储格式,在小尾数格式.低地址存储在字数据的低字节.的是字数据的高字节. 如5A6C中 ...
- Windows Server 2008 R2 SP1 下载地址
Windows Server 2008 R2 SP1 http://download.microsoft.com/download/0/A/F/0AFB5316-3062-494A-AB78-7FB0 ...
- DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为(转)
一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢 ...
- 基于AVR128单纯Modbus协议实施
Modbus通信协议Modicon公司1979在发展中,适用于工业现场总线协议控制.Modbus通信系统包含芯片的节点,并与组合物可编程控制的公共传输线,它的目的是收集和监视多个节点的数据.Modbu ...
- swift 笔记 (十九) ——
协议
协议(Protocols) 协议仅是用定义某些任务或者是功能必须的方法和属性. 类似于java里的interface的作用.但协议并不会实现详细的功能. 我猜这个名字源于OO中提到的"契约& ...
- 怎么样Ubuntu正在使用root账号登录
一个. 因为当你需要 root 权限,使用 sudo 我们将能够做到这一点.假设你真的需要在 Ubuntu 启用 root 帐户的话,这是最好的运行下面的操作: 1.再次设置 root 的passwo ...