星空网 > 软件开发 > 网页设计

canvas 平移缩放

1.平移
canvas其实只是一个包装器,真正起着重要作用的部分是2D渲染上下文,这才是我们真正绘制图形的地方。
然而2D渲染上下文是一种基于屏幕的标准绘制平台。它采用屏幕的笛卡尔坐标系统,以左上角(0,0)坐标为原点。
向右移动时x的坐标值增加,向下移动时y的坐标值增加。
好了了解了坐标系统之后,咱们就可以尽情的移动处理图形的位置了!
平移,也就是参照2D渲染上下文的原点(0,0),将图形从一个坐标点移动到另一个坐标点的过程!
使用方法:translate(x,y) 两个参数分别以原点为坐标 向左增加x个单位值,向下增加y个单位值。

<!DOCTYPE html><html ="http://www.w3.org/1999/xhtml"><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>变形</title>  <script type="text/javascript">    window.onload = function () {      var canvas = document.getElementById("myCanvas");      var context = canvas.getContext("2d");      context.fillRect(150, 150, 100, 100);      context.translate(150, 150); //设置平移       context.fillStyle = "rgb(255,0,0)";      context.fillRect(150, 150, 100, 100);  //执行位移后,将原点坐标(150,150)分别加上150,即以坐标(300,300)为原点坐标绘制宽高为100单位的矩形。            context.fillStyle = "rgb(0,255,255)";      context.translate(150, 150);  //两次位移 相当于位移了300 还是以(300,300)为坐标进行绘制      context.fillRect(0, 0, 100, 100);    }  </script></head><body>  <canvas id="myCanvas" width="1000" height="1000">    您的浏览器暂不支持画布!  </canvas></body></html>

由此不难看出,canvas的绘图状态一旦设置,就会影响之后所有元素的绘制属性!
这是由于它们都是在2D渲染上下文中操作的,而不是只针对所绘制的图形。

 

2.缩放
使用方法:scale(x,y);
调整元素在2D上下文中的尺寸,与平移的区别在于(x,y)参数是缩放倍数,而不是像素值。
单独使用该方法,会让之后所有元素都跟着放大相应的倍数,这肯定不是你所想要的!
因此我们可以在缩放前,先调用save()方法,保存一下绘图状态,等当前元素执行了缩放之后,
我们再调用一下restore()方法,这样就可以恢复到之前的绘图状态了,从而实现只对当前元素进行缩放的操作!

<!DOCTYPE html><html ="http://www.w3.org/1999/xhtml"><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>变形</title>  <script type="text/javascript">    window.onload = function () {      var canvas = document.getElementById("myCanvas");      var context = canvas.getContext("2d");      context.save(); //先保存下绘图状态      context.translate(150, 150); //进行位移操作      context.scale(2, 2); //将绘制元素放大2倍      context.fillRect(0, 0, 100, 100);       context.restore(); //恢复绘图状态      context.fillRect(0, 0, 100, 100); //此时,绘制的矩形既没位移,又没放大!    }  </script></head><body>  <canvas id="myCanvas" width="1000" height="1000">    您的浏览器暂不支持画布!  </canvas></body></html>

 

 

交流群:225443677




原标题:canvas 平移缩放

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

突发!合并评论出事了!上万条评论一夜清空...:https://www.ikjzd.com/articles/144219
苹果市值暴跌3万亿!今夜,苹果腰斩!:https://www.ikjzd.com/articles/14422
卖家上千条评论丢失,亚马逊又对review重拳出击?卖家如何自救看这里!:https://www.ikjzd.com/articles/144220
亚马逊英国将成为第一个上市CBD产品的全球平台,Love Hemp受邀参与试点:https://www.ikjzd.com/articles/144225
亚马逊引流方法:https://www.ikjzd.com/articles/144228
Wish官宣黄钻产品可以调价,你读懂这个信号了吗?:https://www.ikjzd.com/articles/144230
出境旅游预订须知:https://www.vstour.cn/a/365175.html
九寨沟景区地图(详细指南和攻略):https://www.vstour.cn/a/365176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流