我希望有一个文本框，用户可以将图像URL粘贴到其中，并有一个输入按钮，单击该按钮将在画布上绘制图像。这是我的画布和文本框/输入按钮。
<body>
<input type="text" id="input"/><input type="button" value="Enter" onclick="useImage()">
<canvas id="canvas" width="600" height="400" style="border:1px solid grey;">
</body>
然后我知道我应该在我的javascript中有一个函数，允许该函数并引用canvas：
<script>
function useImage(){
var c = document.getElementById("canvas");
var ctx = c.getContext("2d"); //WHAT GOES IN HERE?
ctx.drawImage(img,0,0,600,400);
</script>
但是我不确定如何使我的功能正常工作，有人可以帮忙吗？我希望图像填充整个600x400的画布。
一种简单的方法是在页面上创建图像元素，然后drawImage从那里拉数据。您可以尝试这样的事情
function useImage(ev){
// create the image element
var img = document.createElement('img');
// get the image url from the input box
img.src = document.getElementById('input').value;
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.drawImage(img,0,0,600,400);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句