Question

怎么获取 canvas rect矩形的宽高

Answer 1

获取canvas的宽高
相信使用canvas制作2d图画的程序员都遇到过这么一个场景，定义好一块区域，然后在这个区域内绘制图画，那么所绘制的图画充满这个区域，但是因为某些原因，我们要改变canvas的大小，同时改变外部包裹容器的大小。那么我们怎么获取宽高呢？
不同于普通DOM节点，我们可以使用document.getElementById('').style.width;或者document.getElementById('').offserWidth;获取。
在canvas中，使用这两种方法均不可
首先我们要获取到canvas,在此还是使用的原生的js,
var canvas = document.getElementById('canvas');
接下来，使用getBoundingClientRect( )，绘制矩形对象。将canvas所占的区域绘制为矩形。这个方法返回的是一个对象，包含元素各边与页面上边与左边 的距离及构成元素的宽高。【ie有些许数字差，2px】
这样就可以获取到canvas的宽高了。
代码如下
var myCanvas = document.getElementById(’ ‘);
var myCanvas_rect = myCanvas.getBoundingClientRect();
var widths = myCanvas_rect.width;
var heights = myCanvas_rect.height;