Sail


手在键盘敲很轻


使用drawImage不显示图片

CanvasRenderingContext2D.drawImage()方法可以在Canvas上绘制图像。

语法

1
2
3
void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数

image

绘制到上下文的元素。允许任何的 canvas 图像源(CanvasImageSource),例如:HTMLImageElement,HTMLVideoElement,或者 HTMLCanvasElement。

dx

目标画布的左上角在目标canvas上 X 轴的位置。
dy

目标画布的左上角在目标canvas上 Y 轴的位置。

dWidth

在目标画布上绘制图像的宽度。 允许对绘制的图像进行缩放。 如果不说明, 在绘制时图片宽度不会缩放。

dHeight

在目标画布上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明, 在绘制时图片高度不会缩放。
sx

需要绘制到目标上下文中的,源图像的矩形选择框的左上角 X 坐标。

sy

需要绘制到目标上下文中的,源图像的矩形选择框的左上角 Y 坐标。

sWidth

需要绘制到目标上下文中的,源图像的矩形选择框的宽度。如果不说明,整个矩形从坐标的sx和sy开始,到图像的右下角结束。

sHeight

需要绘制到目标上下文中的,源图像的矩形选择框的高度。


易错点

需要注意的是,调用drawImage时,若图片没有加载完,什么也不会发生。
因此你应该用load时间来保证不会在加载完毕之前使用这个图片

1
2
3
4
5
var img = new Image();   // 创建img元素
img.onload = function(){
// 执行drawImage语句
}
img.src = 'myImage.png'; // 设置图片源地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body onload="draw();">
<canvas id="canvas" width="1000" height="1000"></canvas>
<script>
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0,500,500);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.closePath();
ctx.stroke();
};
img.src = './images/1.png';
}
</script>

以上这段代码我在执行的时候,却没有加载出图片。

后来我将图片压缩了下,就可以正常工作了。

drawImage-0.png

© 2016-2019. | 由Hexo强力驱动 | 主题Huno | 渝ICP备17002561号 | 不装弱了,我要做大佬