canvas rotate方法

接上一篇图片上传功能中的ios下横屏拍的图片，最终上传却变成了竖向的解决方法。

理解canvas的rotate,得先了解几个概念

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(0,0,50,100);

1、rotate的圆心是canvas的0 0位置

2、将canvas本身理解为可视区域

3、ctx rotate以后x轴和y轴都会发生变化

回到最初的问题，横向拍摄的图片绘制进canvas变成了竖向，首先想到的是rotate 90 或270 度来解决。

以rotate90度来做实例，我们先生成一个竖向的方块

<canvas id="myCanvas" style="background:#eee;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(0,0,50,100);
</script>

我们需求是一个横向的，这个时候加入rotate

<canvas id="myCanvas" style="background:#eee;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(Math.PI/2);
ctx.fillRect(0,0,50,100);
</script>

发现黑方块不见了，主要是旋转90度以后，出了可视区域，在可视区域的右边，而且ctx本身的x，y轴也旋转了，这个时候需要改变绘制起点，才能让他重新出现在可视区域内，并实现了需要的效果

<canvas id="myCanvas" style="background:#eee;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(Math.PI/2);
ctx.fillRect(0,-100,50,100);
</script>

canvas rotate方法相关推荐

Android开发之Canvas rotate方法释疑
Canvas的rotate()函数本应该是很简单的一个函数,但是由于api手册言之不详,使用中难免有吃不准的地方.下面所记录的几点,都是我在使用中所迷惑过的问题,特此记录. 1,坐标原点在哪里? 如果 ...
Android Canvas rotate 和translate 两个方法的研究
转自:http://www.verydemo.com/demo_c131_i3507.html 首先我们来看这样一个需求:显示一个竖向显示的TextView.说白了,就是把我们日常使用的TextVie ...
利用canvas画布和rotate()方法让画的图形旋转起来
上一篇讲了利用canvas画布画太极图,这一篇说的是让太极图旋转起来. **思路:**利用HTML DOM 的setInterval()方法,它会按照指定的周期来调用函数或计算表达式.再利用画布的ro ...
（四）Canvas API方法和属性汇总
canvas主要属性和方法方法描述 save() 保存当前环境的状态 restore() 返回之前保存过的路径状态和属性 createEvent() getContext() 返回一个对象,指 ...
Canvas 绘制方法过一遍
Canvas 基础方法和参数介绍 save() restore() void enableZ() void disableZ() 绘制方法及参数介绍 1. drawARGB 画布颜色设置 void d ...
安卓中Canvas使用方法
更多技术内容请移步:我的个人博客一.前言今天是周日,昨天刚刚写完了一篇关于如何搭建LNMP环境,让自己可以DIY有个性的个人主页: http://blog.csdn.net/jiangwei091 ...
canvas rotate()画布的旋转详解
刚才还是风和日丽的天,这没一会会就乌云密布了,雨呀,眼瞅就下来了呢,一场秋雨一场寒,感觉懂得要穿棉袄了的节奏 10月1号之前,还是T恤呢,10月放完国庆节和中秋节以后就开始毛衣.毛衫.毛外套了,这真的 ...
html画布用函数旋转,canvas rotate()画布的旋转详解
刚才仍是风和日丽的天,这没一会会就乌云密布了,雨呀,眼瞅就下来了呢,一场秋雨一场寒,感受懂得要穿棉袄了的节奏 10月1号以前,仍是T恤呢,10月放完国庆节和中秋节之后就开始毛衣.毛衫.毛外套了,这真的 ...
canvas rotate中心点问题
ctx = document.getElementByIdx_x_x_x('canvas').getContext('2d'); ctx.fillStyle = "rgb(250,0 ...

canvas rotate方法

canvas rotate方法相关推荐

最新文章

热门文章