HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)


Posted in HTML / CSS onJuly 04, 2013

HTML5 Canvas中提供了实现图形平移,旋转,放缩的API。
平移(translate)
平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y),原来的(0,0)坐标则变成(-x, -y)
图示如下:
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图) 
任何原来的坐标点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大小。效果如图示:
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图) 
复制代码
代码如下:

// 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)
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图) 
旋转前的坐标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);
}
HTML / CSS 相关文章推荐
深入解读CSS3中transform变换模型的渲染
May 27 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 #HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 #HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 #HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 #HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 #HTML / CSS
html5 input属性使用示例
Jun 28 #HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 #HTML / CSS
You might like
php 引用(&amp;)详解
2009/11/20 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
Python随机读取文件实现实例
2017/05/25 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
python selenium操作cookie的实现
2020/03/18 Python
python小白学习包管理器pip安装
2020/06/09 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
创建市级文明单位实施方案
2014/03/01 职场文书
我为自己代言广告词
2014/03/18 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
Android中的Launch Mode详情
2022/06/05 Java/Android