html5 平移,Html5 canvas绘图旋转和平移

Html5canvs允许平移和旋转绘图，我们来看下面的代码，：

平移和旋转

var

ctx;

function init(){

ctx=document.getElementByIdx_x("canvas").getContext("2d");

ctx.fillStyle="rgb(250,0,0)";

ctx.fillRect(50,50,100,200);

ctx.fillStyle="rgb(0,0,250)";

ctx.fillRect(50,50,5,5);

}

http-equiv="Content-Type" content="text/html;

charset=utf-8">

onLoad="init();">

id="canvas" width="400" height="300">

结果如图所示

我们绘制了一个很大的红色矩形，左上角坐标(50，50)，另外还在这个矩形上面绘制一个小的蓝色正方形，我们是以蓝色小正方形所在的左上角为支点旋转这个大矩形的，逆时针旋转，我们制定逆时针旋转30度，编码为Math.PI/6.

我们修改前面的代码来完成这个旋转，我加入了旋转，然后绘制红色矩形，再反向旋转(这点有点奇怪，实际上起到了取消旋转的作用，回复原来的状态)，再绘制蓝色正方形：

function init(){

ctx=document.getElementByIdx_x("canvas").getContext("2d");

ctx.fillStyle="rgb(250,0,0)";

ctx.rotate(-Math.PI/6);

ctx.fillRect(50,50,100,200);

ctx.fillStyle="rgb(0,0,250)";

ctx.rotate(Math.PI/6);

ctx.fillRect(50,50,5,5);

}

遗憾的是，这并不是我们要的结果，如图：

为什么会这样呢？问题在于旋转点是在原点(0，0)，而不是红矩形的左上角。所以哦我们需要先完成一个平移，把旋转的原点移动到蓝色矩形的坐标，以蓝色矩形为原点来旋转，当旋转完成后再平移回去完成后面的绘图。画布上所有的绘制都是基于一个坐标系完成的，我们可以使用

save和restore操作保存当前的坐标系(即轴的位置和方向)，然后回复到原来的坐标完成后续的工作.代码如下：

function init(){

ctx=document.getElementByIdx_x("canvas").getContext("2d");

ctx.fillStyle="rgb(250,0,0)";

ctx.save();

ctx.translate(50,50);

ctx.rotate(-Math.PI/6);

ctx.translate(-50,-50);

ctx.fillRect(50,50,100,200);

ctx.restore();

ctx.fillStyle="rgb(0,0,250)";

ctx.fillRect(50,50,5,5);

}

效果如图：

这样我们就完成了一个正确的旋转，rotate方法需要一个弧度单位的角度，负数为逆时针。

html5 平移,Html5 canvas绘图旋转和平移相关推荐

【Android UI】Canvas 画布 ⑨ ( Canvas 绘图坐标系平移实例 )
文章目录一.Canvas 绘图坐标系平移实例二.代码示例 Canvas 状态保存机制中 , 存在两个栈结构 , 分别是状态栈和图层栈 ; 其中图层栈又称为 Layer 栈 ; Canv ...
旋转平移变换矩阵是先旋转还是先平移？
旋转平移变换旋转平移变换矩阵是先旋转再平移的=rotation*translation
HTML5 Canvas平移，放缩，旋转演示
HTML5 Canvas中提供了实现图形平移,旋转,放缩的API. 平移(translate) 平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y),原来的(0,0)坐标则变 ...
【绘制】HTML5 Canvas坐标变换——坐标系的平移(translate)、缩放(scale)、旋转(rotate)、镜像。（图文、代码）
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
HTML5 学习总结（四）——canvas绘图、WebGL、SVG
目录一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画二.WebGL 2.1.HTML ...
html5 2d绘图,HTML5 canvas绘图
简介 HTML5新增了canvas元素,我们可以利用canvas绘制各种图形文本图表等,熟悉使用canvas还可以写出各种多彩的特效. 只是声明一张画布,本身并没有绘图能力,我们需要利用JS来实现绘图 ...
Android Canvas 平移、缩放、旋转的理解
自己对这个几个方法,用了好多次了,但对它们的原理概念都还是没仔细理解清楚,真是太菜了. View和canvas并不是同一个东西,可以这样想象,我们的View是固定的,相当于与一个画板或者画框,画板范围 ...
html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
android画布旋转,Android Canvas 平移、缩放、旋转的理解
自己用了很久对这个几个方法,用了好多次了,但对它们的原理概念都还是没仔细理解清楚,真是太菜了. View和canvas并不是同一个东西,可以这样想象,我们的View是固定的,相当于与一个画框,画框范围 ...

html5 平移,Html5 canvas绘图旋转和平移

html5 平移,Html5 canvas绘图旋转和平移相关推荐

最新文章

热门文章