为什么 context.drawImage() 在 html 画布中不起作用？答案

【问题标题】：Why doesn't context.drawImage() work in html canvas?为什么 context.drawImage() 在 html 画布中不起作用？
【发布时间】：2014-11-28 22:49:11
【问题描述】：

我正在尝试将图像文件“sticky.png”放入画布框中，但我得到的只是一个空白画布。谁能指出我做错了什么和/或给我有效的代码？

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

<body>

<script>

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sticky = new Image();
sticky.onload = function() {
context.drawImage(sticky, 0, 0);
sticky.src = "sticky.png";
};


</script>

</body>

【问题讨论】：

图片加载后绘制。见这里html5canvastutorials.com/tutorials/html5-canvas-images
谢谢！那正是我做错的。现在已经解决了。

标签： javascript html canvas drawimage

【解决方案1】：

您需要在sticky.onload 之前添加sticky.src。

<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sticky = new Image();
sticky.src = "sticky.png";
sticky.onload = function() {
  context.drawImage(sticky, 0, 0);
};

</script>
</body>

Fiddle

【讨论】：

谢谢，这正是我需要的修复！
天啊。在我找到你的答案之前浪费了 8 个小时。像你这样的人拯救上帝

【解决方案2】：

有时作为workAround，我们必须在画布之前加载图像。这是非常不寻常的，但它有效。然后你只是隐藏图像。不要忘记使用 setTimeOut 等待图像加载！

setTimeout("paintStar()", 2000);

function paintStar() {
    var canva3 = document.getElementById('canvas3');
    canva3.width = 640;
    canva3.height = 480;
    var ct3 = canva3.getContext('2d');
    var img = new Image();
    img.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3DlDGTyfaFMtUf9GYykLglqfS8GzHbeKRV5vDfHraV1ihNIYo';

    ct3.drawImage(img, 0, 0);
    ct3.drawImage(img, 0, 0, 20, 20, 10, 200, 20, 20);
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CANVAS</title>
    <style>
        .canvas-1 {
            width: 640px;
            height: 480px;
            border: 1px solid #777;
            
        }
        .img-1 {
            display: none;
        }

    </style>
    <script src="canva3.js" defer></script>
</head>

<body>
<div class="img-1"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3DlDGTyfaFMtUf9GYykLglqfS8GzHbeKRV5vDfHraV1ihNIYo" alt=""></div>
<canvas id="canvas3" style="border: 2px solid #444;">Doesn't work!</canvas>

</body>

</html>

【讨论】：

朋友，请查看原生 Image 元素的异步 api。由于您在没有注册 onload 回调的情况下设置 image.src，因此画布绘制有时会发生在浏览器准备要呈现的图像之前。