HTML5Canvas平移，放缩，旋转演示-创新互联

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

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、做网站、长汀网络推广、成都微信小程序、长汀网络营销、长汀企业策划、长汀品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；创新互联为所有大学生创业者提供长汀建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

平移(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 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  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); 		}

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：HTML5Canvas平移，放缩，旋转演示-创新互联
转载来于：http://cqcxhl.cn/article/degsji.html