javascript - 画布绘制图像

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>

标签： javascriptcanvas

Answer 1

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

您提供150, 150. 你的画布'width并且height都是150。

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

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