码迷,mamicode.com
首页 > 编程语言 > 详细

HTML5 javascript修改canvas的大小

时间:2014-11-28 17:48:37      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   sp   java   strong   on   

方法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,是自己的理解,不知对否。。。。

 

HTML5 javascript修改canvas的大小

标签:style   blog   io   ar   color   sp   java   strong   on   

原文地址:http://www.cnblogs.com/voctrals/p/4128724.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!