HTML5Canvas平移,放缩,旋转图文代码详情
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了HTML5Canvas平移,放缩,旋转图文代码详情,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4591字,纯文字阅读大概需要7分钟。
内容图文
![HTML5Canvas平移,放缩,旋转图文代码详情](/upload/InfoBanner/zyjiaocheng/389/379aac9070fb4ebda8c34c1b8c112b0a.jpg)
平移(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); }
以上就是HTML5 Canvas平移,放缩,旋转图文代码详情的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!
内容总结
以上是互联网集市为您收集整理的HTML5Canvas平移,放缩,旋转图文代码详情全部内容,希望文章能够帮你解决HTML5Canvas平移,放缩,旋转图文代码详情所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。