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

Question

我正在尝试在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中并调用函数中的元素以在画布上绘制它，但是函数将再次执行，但画布上不会显示任何图像。

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，以便在画布外绘制图像， 如果Onload函数在img.src之前，那就更好了。

Answer 2

您的代码应为：

function fillCanvas()
{
   alert("filling Canvas");
   var ctx = 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");


}

您使用ctx.drawImage(img,600,450);而变量为cxt