不能将图像加载到HTML画布

您可以请在本演示中熟悉并让我知道为什么我无法将图像加载到HTML画布中？不能将图像加载到HTML画布

我收到此错误：

{ 
    "message": "Uncaught TypeError: c.getContext is not a function", 
    "filename": "https://stacksnippets.net/js", 
    "lineno": 24, 
    "colno": 17 
}

$(document).ready(function() { 
 
    var expose = function() { 
 
    var c = $("#myCanvas"); 
 
    var ctx = c.getContext("2d"); 
 
    var img = $("#scream"); 
 
    ctx.drawImage(img, 10, 10); 
 
    }; 
 
    setTimeout(expose, 2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Image to use:</p> 
 
<img id="scream" width="220" height="277" src="https://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream"> 
 

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

来源

2017-07-29 Behseini

那么因为jQuery返回包含DOM元素的对象，并使用#myCanvas实际上不选择的DOM元素

$(document).ready(function() { 
 
    var expose = function() { 
 
    var c = document.getElementById("myCanvas"); 
 
    var ctx = c.getContext("2d"); 
 
    var img = document.getElementById("scream"); 
 
    ctx.drawImage(img, 10, 10); 
 
    }; 
 
    setTimeout(expose, 2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Image to use:</p> 
 
<img id="scream" width="220" height="277" src="https://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream"> 
 

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

来源

2017-07-29 21:42:19 Ronnie

它应该是这样的

$(document).ready(function() { 
 
    var expose = function() { 
 
    var c = $("#myCanvas"); 
 
    var ctx = c[0].getContext("2d"); 
 
    var img = $("#scream"); 
 
    ctx.drawImage(img, 10, 10); 
 
    }; 
 
    setTimeout(expose, 2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Image to use:</p> 
 
<img id="scream" width="220" height="277" src="https://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream"> 
 

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

来源

2017-07-29 21:40:33

感谢Ishan，但是新的错误是什么？ – Behseini

这是一个与您的image.Lemme问题检查，但我确定它是所有关于image.Change图像，它应该工作，而且错误将只在日志中存在，而不是显示给用户。 –

它应该是img [0]，因为JQuery没有选择DOM元素，它返回一个包含DOM对象的对象 – Ronnie

你需要做出两个改变：

var ctx = c[0].getContext("2d"); 
var img = document.getElementById('scream');

对于第一个： jQuery equivalent of getting the context of a Canvas

第二，预计你传递一个CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas，jQuery返回一个jQuery对象而不是DOM元素。

来源

2017-07-29 21:51:44

不能将图像加载到HTML画布

回答

相关问题