画布drawImage不工作，根本没有错误[关闭]答案

【问题标题】：Canvas drawImage is not working, no error at all [closed]画布drawImage不工作，根本没有错误[关闭]
【发布时间】：2015-02-15 17:38:05
【问题描述】：

这里是代码

       function drawImg() {


                            var canvas = document.getElementById('mask');
                            var context = canvas.getContext('2d');

                            var img = new Image();
                            //alert(img.src);
                            img.src = "http://localhost/photo/webs.png";

                            img.onload = function(){

                                    context.drawImage(img, 100, 100);

                                    var URL = canvas.toDataURL();
                                    document.getElementById('main').src = URL;
                            };



                    }

而html代码是

         <img id="main" src="main.png" />
         <canvas class="mask" id="mask" width='200' height='200'></canvas>

         <p rel="32,223,95" onclick="drawImg()" title="Green">Green</p>

图片正在加载，已确认。但不分配给画布。

【问题讨论】：

已解决：代码没有问题。图像在那里，但画布宽度、高度很小，并且图像的一小部分可见。白色图像和白色背景。无法区分...感谢您的时间伙计们

标签： javascript image html5-canvas

【解决方案1】：

试试这个：

脚本：

   function drawImg() {
    var img = new Image();
    //alert(img.src);
    img.src = "home.png";
    console.log(img);
    if(img.complete) { //check if image was already loaded by the browser
           callback(img);
        }else {
           img.onload = callback;
        }


}
var callback = function(img) {

    var canvas = document.getElementById('mask');
    var context = canvas.getContext('2d');
    context.drawImage(img, 100, 100);
       var URL = canvas.toDataURL();
       console.log(URL);
       document.getElementById('main').src = img.src;
    }

html：

<img id="main" src="main.png" />
         <canvas class="mask" id="mask" width='200' height='200'></canvas>

         <p rel="32,223,95" onclick="drawImg()" title="Green">Green</p>

【讨论】：

【解决方案2】：

画布：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">

<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

【讨论】：