java canvas旋转_在HTML5 Canvas上将图像旋转90度

我无法使用HTML5画布旋转图像 . 我想我的数学错误，并希望得到任何帮助 .

在移动设备上，我在150px x 558px画布上捕获用户签名 . 我试图创建一个558像素×150像素的图像，这只是旋转90度的捕获特征 . 下面是我目前提出的代码片段 . 正如你可能猜测的那样，我对数学的掌握并不好 . 我相信我的程序是正确的，而不是数字 .

我要做的是：1)将画布的中心设置为中间，偏移我的图像的高度和宽度2)将画布旋转90度3)绘制图像4)将画布翻译回来 .

EDIT: Here's a JSFiddle: http://jsfiddle.net/x9FyK/

var $signature = $("#signature");

var signatureData = $signature.jSignature("getData");

console.log(signatureData);

var img= new Image();

img.onload = function() {

var rotationCanvas = document.createElement('canvas');

rotationCanvas.width = img.height;

rotationCanvas.height = img.width;

var context = rotationCanvas.getContext("2d");

context.translate((rotationCanvas.width/2) - (img.width/2), -(rotationCanvas.height/2) - img.height/4);

context.rotate(Math.PI/2);

context.drawImage(img,0,0);

context.translate(-((rotationCanvas.width/2) - (img.width/2)), -(-(rotationCanvas.height/2) - img.height/4));

var rotatedData = rotationCanvas.toDataURL();

...Handling rotated data here

};

img.src = signatureData;

如果我能提供更多信息，请告诉我 .

在此先感谢您的帮助，

java canvas旋转_在HTML5 Canvas上将图像旋转90度相关推荐

background 旋转_基于HTML5 Canvas 实现矢量工控风机叶轮旋转
之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元--叶轮旋转. 先看看最后我们实现的效果我们先来看下这个叶轮模型长什么样从模型上看,这个叶轮模型有三个叶片,每一个叶片都是不 ...
background 旋转_基于HTML5 Canvas实现工控2D叶轮旋转
之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元--叶轮旋转. 我们先来看下这个叶轮模型长什么样从模型上看,这个叶轮模型有三个叶片,每一个叶片都是不规则图形,显然无法用上我们 ...
有一副由NxN矩阵表示的图像，这里每个像素用一个int表示，请编写一个算法，在不占用额外内存空间的情况下(即不使用缓存矩阵)，将图像顺时针旋转90度。给定一个NxN的矩阵，和矩阵的阶数N,请返回旋转
有一副由NxN矩阵表示的图像,这里每个像素用一个int表示,请编写一个算法,在不占用额外内存空间的情况下(即不使用缓存矩阵),将图像顺时针旋转90度. 给定一个NxN的矩阵,和矩阵的阶数N,请返回旋转 ...
【Android RTMP】NV21 图像旋转处理 ( 问题描述 | 图像顺时针旋转 90 度方案 | YUV 图像旋转细节 | 手机屏幕旋转方向 )
文章目录安卓直播推流专栏博客总结一. NV21 图像格式与 Camera图像传感器方向问题二. NV21 图像格式视频旋转 1. 图像旋转问题及解决方案 ( 顺时针旋转 90 度 ) 2. NV ...
信息学奥赛一本通 1127：图像旋转 | OpenJudge NOI 1.8 11:图像旋转
[题目链接] ybt 1127:图像旋转 OpenJudge NOI 1.8 11:图像旋转 [题目考点] 1. 二维数组 [解题思路] 以下分析中,行列从1开始数.该二维矩阵有n行m列,行号为1~n ...
canvas 擦除动画_用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...
android 弹出弹框2秒消失_基于HTML5 Canvas 实现弹出框
前言用户鼠标移入时,有弹出框出现,这样的需求很常见.这在处理 HTML 元素实现时简单,但是如果是对 HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为 Canvas 使用的是另外 ...
h5的横线_使用HTML5 Canvas绘制直线或折线等线条的方法讲解
HTML5 Canvas基本概念讲解html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏 ...
echart图片库_基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

java canvas旋转_在HTML5 Canvas上将图像旋转90度

java canvas旋转_在HTML5 Canvas上将图像旋转90度相关推荐

最新文章

热门文章