canvas中绘制图片居中

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);
    }

版权声明:本文为qq_31301099原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。