HTML5 Canvas平移,放缩,旋转演示

简介: HTML5 Canvas中提供了实现图形平移,旋转,放缩的API。 平移(translate) 平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y),原来的(0,0)坐标则变成(-x, -y) 图示如下: 任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移 点坐标translate(x, y)。

HTML5 Canvas中提供了实现图形平移,旋转,放缩的API。

平移(translate)

平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y),原来的(0,0)坐标则变成(-x, -y)

图示如下:


任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移

点坐标translate(x, y)。

代码演示:

// translate is move the startpoint to centera and back to top left corner

function renderText(width, height, context) {

    context.translate(width/ 2, height / 2); // 中心点坐标为(0, 0)

    context.font="18px Arial";

    context.fillStyle="blue";

    context.fillText("Please Press <Esc> to Exit Game",5,50);

    context.translate(-width/2, -height/2); // 平移恢复(0,0)坐标为左上角

    context.fillText("I'm Back to Top",5,50);

}

 

放缩(Scale)

Scale(a, b)意思是将对象沿着XY轴分别放缩至a*x,  b*y大小。效果如图示:


// translation the rectangle.

function drawPath(context) {

    context.translate(200,200);

    context.scale(2,2);// Scale twice size of original shape

    context.strokeStyle= "green";

    context.beginPath();

    context.moveTo(0,40);

    context.lineTo(80,40);

    context.lineTo(40,80);

    context.closePath();

    context.stroke();

}

旋转(rotate)

旋转角度rotate(Math.PI/8)


旋转前的坐标p(x, y)在对应的旋转后的坐标P(rx, ry)为

Rx = x * cos(-angle) - y * sin(-angle);

Ry = y * cos(-angle) + x * sin(-angle);

旋转90度可以简化为:

Rx = y;

Ry = -x;

Canvas中旋转默认的方向为顺时针方向。演示代码如下:

// new point.x = x * cos(-angle) -y * sin(-angle),

// new point.y = y * cos(-angle) +x * sin(-angle)

function renderRotateText(context) {

    context.font="24px Arial";

    context.fillStyle="red";

    context.fillText("i'm here!!!",5,50);

   

    // rotate -90 degreee

    // context.rotate(-Math.PI/2);

    // context.fillStyle="blue";

    // context.fillText("i'm here!!!", -400,30);

   

    // rotate 90 degreee

    context.rotate(Math.PI/2);

    context.fillStyle="blue";

    context.fillText("i'm here!!!",350,-420);

   

    console.log(Math.sin(Math.PI/2));

   

    // rotae 90 degree and draw 10 lines

    context.fillStyle="green";

    for(var i=0; i<4; i++) {

        var x = (i+1)*20;

        var y = (i+1)*60;

        var newX = y;

        var newY = -x; 

        context.fillRect(newX,newY, 200, 6);

    }

}

通常做法是旋转与平移一起使用,先将坐标(0,0)平移到中心位置

translate (width/2, height/2)然后再使用rotate(Math.PI/2)完成旋转

代码示例如下:

function saveAndRestoreContext(context) {

    context.save();

    context.translate(200,200);

    context.rotate(Math.PI/2);

    context.fillStyle="black";

    context.fillText("2D Context Rotate And Translate", 10, 10);

    context.restore();

    context.fillText("2D Context Rotate And Translate", 10, 10);

}

 全部JavaScript代码:

		var tempContext = null; // global variable 2d context
		window.onload = function() {
			var canvas = document.getElementById("target");
			canvas.width = 450;
			canvas.height = 450;
			
			if (!canvas.getContext) {
			    console.log("Canvas not supported. Please install a HTML5 compatible browser.");
			    return;
			}
			
			// get 2D context of canvas and draw image
			tempContext = canvas.getContext("2d");
			// renderText(canvas.width, canvas.height, tempContext);
			saveAndRestoreContext(tempContext);
			// drawPath(tempContext);
		}
		
		// translate is move the start point to centera and back to top left corner
		function renderText(width, height, context) {
			context.translate(width / 2, height / 2);
			context.font="18px Arial";
			context.fillStyle="blue";
			context.fillText("Please Press <Esc> to Exit Game",5,50);
			context.translate(-width / 2, -height / 2);
			context.fillText("I'm Back to Top",5,50);
		}
		
		// translation the rectangle.
		function drawPath(context) {
			context.translate(200, 200);
			context.scale(2,2); // Scale twice size of original shape
			context.strokeStyle = "green";
			context.beginPath();
			context.moveTo(0, 40);
			context.lineTo(80, 40);
			context.lineTo(40, 80);
			context.closePath();
			context.stroke();
		}
		
		// new point.x = x * cos(-angle) - y * sin(-angle), 
		// new point.y = y * cos(-angle) + x * sin(-angle)
		function renderRotateText(context) {
			context.font="24px Arial";
			context.fillStyle="red";
			context.fillText("i'm here!!!",5,50);
			
			// rotate -90 degreee
			// context.rotate(-Math.PI/2);
			// context.fillStyle="blue";
			// context.fillText("i'm here!!!", -400,30);
			
			// rotate 90 degreee
			context.rotate(Math.PI/2);
			context.fillStyle="blue";
			context.fillText("i'm here!!!", 350,-420);
			
			console.log(Math.sin(Math.PI/2));
			
			// rotae 90 degree and draw 10 lines
			context.fillStyle="green";
			for(var i=0; i<4; i++) {
				var x = (i+1)*20;
				var y = (i+1)*60;
				var newX = y;
				var newY = -x;	
				context.fillRect(newX, newY, 200, 6);
			}
		}
		
		function saveAndRestoreContext(context) {
			context.save();
			context.translate(200,200);
			context.rotate(Math.PI/2);
			context.fillStyle="black";
			context.fillText("2D Context Rotate And Translate", 10, 10);
			context.restore();
			context.fillText("2D Context Rotate And Translate", 10, 10);
		}
目录
相关文章
|
9月前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
128 29
|
9月前
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
80 1
|
10月前
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
137 5
|
11月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
93 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
11月前
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
115 0
HTML5 Canvas制作的粒子十秒倒计时源码
|
11月前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
105 5
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
移动开发 前端开发 API
《HTML5 Canvas游戏开发实战》——3.4 小结
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.4节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1052 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.3 自定义画板
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.3节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1457 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.2 图形的渲染
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.2节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1347 0

热门文章

最新文章