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自定义滚动条样式写法
Dec 25 HTML / CSS
CSS3样式linear-gradient的使用实例
Jan 16 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 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+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
python爬虫使用cookie登录详解
2017/12/27 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
python之django母板页面的使用
2018/07/03 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python安装本地whl的实例步骤
2019/10/12 Python
Python实现自动签到脚本功能
2020/08/20 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
地理教师岗位职责
2014/03/16 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
和睦家庭事迹
2014/05/14 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
python munch库的使用解析
2021/05/25 Python