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 完美实现圆角效果
Jul 13 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 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实现框架(一)
2006/10/09 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
浅谈php7的重大新特性
2015/10/23 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
理解javascript闭包
2015/12/15 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
vue filters的使用详解
2018/06/11 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
python类型强制转换long to int的代码
2013/02/10 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python类的实例化问题解决
2019/08/31 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
使用Python构造hive insert语句说明
2020/06/06 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
小学教师师德感言
2014/02/10 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
结对共建协议书
2014/08/20 职场文书
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL