canvas绘制图片,使图片充满canvas容器,出现的问题

fcxh
  • 434

目标:绘制一张图片,到canvas容器(canvas宽高固定)中

下面是我的实现方式:

var ctx = document.getElement('canvas').getContext('2d');
var img = new Image();
img.src = "xxx";
img.onload = function() {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}

图片描述
(ps: 白色方框内为 cnvas容器);

绘制的图片为何不能充满容器,这和源图片大小有关系吗,因为我试着换成另外一张大图片,竟然可以充满容器绘制。是在不理解(按我的理解,这应该和源图片大小没有关系,因为已经限定了绘制宽高)

css: 代码

.canvas_wrap {
    position: absolute;
    width: 6.5rem;
    height: 4.2rem;
    left: 0.5rem;
    background: #d02608;
    margin: 0px auto;
}
.canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0; top: 0;
    border-radius: 2px;
}

另外,在初始化中,已经将canvas的宽度设置为canvas的css宽度(高度也是一样的)
图片描述
图片描述

回复
阅读 10.6k
5 个回答

drawImage是有9个参数的。。

如文档描述:https://developer.mozilla.org...

你要使用这种写法 ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

s表示source就是图片的位置, d是canvas。明白不?

就是说 sx =0 ,sy =0, sWidth和sHeight就是图片宽高,
dx =0,dy=0, dWidth和dHeight就是canvas的宽高

var ctx = document.getElement('canvas').getContext('2d');
var img = new Image();
img.src = "xxx";
img.onload = function() {
    ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
}

这样试试。

看你的图片居中的样子,应该是图片是png的,本身就有透明的边距吧

给<canvas>标签设置的宽高是元素的盒模型大小,canvas绘图区域的宽高要通过ctx设置,两个宽高表示的意义是不同的。将ctx的宽高设置为<canvas>的盒模型大小,才可以百分百填充。

各位,抱歉了,是我这里的图片问题(带透明边距)。抱歉

你知道吗?

宣传栏