画布绘制图像

Question

我正在尝试在画布上绘制图片，但是它不起作用，我也不知道为什么。这是我的代码：

var canvas = document.getElementById('profile-pic');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
  context.drawImage(imageObj, 150, 150);
};
imageObj.src = '/images/alt-profile.png';

<canvas id='profile-pic' height="150" width="150"></canvas>

Answer 1

查看drawIamge的API。 dx和dy是您要绘制图像的位置的坐标。

您提供了150, 150。您的画布的width和height均 150 。

这意味着，您正在尝试在150, 150位置绘制图像，这意味着您正在画布的外角进行绘制。

将您提供给drawIamge的参数值更改为画布范围内的值，即大于图像尺寸，但小于画布尺寸。