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

Question

我试图让一个图像文件显示在画布上,但似乎无论我尝试它不会出现在画布上.我尝试了几个我在网上找到的例子,似乎没什么用.

我将不胜感激,你可以提出任何可能有问题的帮助.

这是我的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.