javascript - HTML5 Canvas - 图像文件不会显示在 Canvas 上

Question

我正在尝试让图像文件显示在 Canvas 上，但似乎无论我尝试什么它都不会显示在 Canvas 上。我已经尝试了几个在网上找到的示例，但似乎没有任何效果。

如果您能就可能出现的问题提供任何帮助，我将不胜感激。

这是我的 HTML:

使用 JavaScript

        <h3>Puzzle Time</h3>          


        <canvas onclick="fillCanvas()" id="myCanvas" width="600" height="450" style="border:1px solid #CCCCCC;"></canvas>          

        <script type="text/javascript" src="puzzle.js"></script>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>               


    </div>

这是我的 JavaScript:

function fillCanvas()
{
   alert("filling Canvas");
   var cxt = document.getElementById("myCanvas").getContext("2d");
   var img = new Image();
   img.src = "Images/Chrysanthemum_small.jpg";

   img.onload = function()
   {
     ctx.drawImage(img,600,450);   
   };
   alert("done with Canvas");


}

我可以使用该功能，但不会出现任何图像。

我已尝试将图像元素添加到 HTML 并调用函数中的元素以将其绘制在 Canvas 上，但该函数将再次执行但 Canvas 上不会显示任何图像。

Answer 1

您的代码应该是:

function fillCanvas(){
alert("filling Canvas");
var ctx = document.getElementById("myCanvas").getContext("2d");
var img = new Image();

img.onload = function()
{
ctx.drawImage(img,0,0,600,450);   
};
img.src = "Images/Chrysanthemum_small.jpg";
alert("done with Canvas");}

您将起始坐标设置为 600 和 450，以便在 Canvas 外绘制图像， Onload函数最好在img.src之前。