canvas中绘制图片居中

最新推荐文章于 2023-09-03 22:57:07 发布

九

最新推荐文章于 2023-09-03 22:57:07 发布

阅读量2w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html js jquery canvas 文章标签： jquery js css

本文链接：https://blog.youkuaiyun.com/qq_31301099/article/details/52524765

js 同时被 3 个专栏收录

33 篇文章

订阅专栏

html

7 篇文章

订阅专栏

jquery

7 篇文章

订阅专栏

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