canvas中绘制图片居中

来源:互联网 发布:沃尔沃如何安装软件 编辑:程序博客网 时间:2024/04/29 17:21
html:
<canvas class="hide" id="can" width="490px" height="490px" ></canvas>
js:
setImageURL(图片路径");
var image=new Image();function setImageURL(url){    image.src=url;}var canvas=document.getElementById("can");var ctx=canvas.getContext('2d');image.onload = function(){    var div_width=$("#can").width()    var old_width=image.width;    var old_height=image.height;    var scale_x=div_width*old_width/old_height;    var scale_y=div_width*old_height/old_width;    if(old_height>old_width){        ctx.drawImage(image,0,0,old_width,old_height,0,-(scale_y-div_width)/2,div_width,scale_y);    }else{        ctx.drawImage(image,0,0,old_width,old_height,-(scale_x-div_width)/2,0,scale_x,div_width);    }
1 0
原创粉丝点击