HTML5 javascript修改canvas的大小
方法1: 设定固定的值,这种方式跟在html中设定canvas的值没有什么区别:
window.onload = function(){ canvas.height = 100; canvas.width = 200; } changeCanvasSize = function(){ canvas.height = 100; canvas.width = 200; }
方法2: 修改带固定的尺寸,这种方式跟第一种很相似,需要传递参数,这也没什么;
changeCanvasSize = function(width, height){ canvas.height = height; canvas.width = width; }
方法3: 最想记载的一种方式,根据某个图片尺寸设定canvas的大小:
var image = document.getElementById("image"); canvas.width = image.width; canvas.height = image.height;
方法4: 取的是javascript中加载的图片的大小,不能直接取image的大小是因为当执行完了image.src之后,这个图片加载是相对延迟的,也就是说这个时候的image的大小还是0*0。
var image = new Image(); window.onload = function(){ image.src = "some/location/name.jpg"; image.onload = function(){ canvas.width = image.width; canvas.height = image.height; } }
尤其是以上方法4,是自己的理解,不知对否。。。。