https://github.com/orzhtml/rotateimg
jq-利用canvas让图片旋转角度
https://github.com/orzhtml/rotateimg
Last synced: 11 months ago
JSON representation
jq-利用canvas让图片旋转角度
- Host: GitHub
- URL: https://github.com/orzhtml/rotateimg
- Owner: orzhtml
- Created: 2016-12-26T02:49:06.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-26T07:58:56.000Z (over 9 years ago)
- Last Synced: 2025-07-03T12:06:29.732Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 795 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### jquery-利用canvas让图片旋转角度
#### 说明
如果你没有 gulp 请先全局安装
在（控制台 | cmd）中输入命令全局安装 gulp
// window
`npm install -g gulp`
// MacOS | Linux
`sudo npm install -g gulp`
安装完成后再输入检查是否安装成功
`gulp -v`
然后通过 cmd 进入本插件的目录
`cd /你的目录/rotateImg`
安装依赖（最好开 vpn）
`npm install`
依赖安装完成后运行
`gulp`
四个角度变化：
0:
canvas.width = width;
canvas.height = height;
cxt.translate(0, 0);
cxt.rotate(0 * Math.PI / 180);
----
90:
canvas.width = height;
canvas.height = width;
cxt.translate(height, 0);
cxt.rotate(90 * Math.PI / 180);
----
180:
canvas.width = width;
canvas.height = height;
cxt.translate(width, height);
cxt.rotate(180 * Math.PI / 180);
----
270:
canvas.width = height;
canvas.height = width;
cxt.translate(0, width);
cxt.rotate(270 * Math.PI / 180);