Question

我希望有一个用户可以将图像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中有一个函数允许这个并引用画布：

<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的整个画布。

Answer 1

一种简单的方法是在页面上创建图像元素，然后让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);   
  }

让用户输入图像URL并在html5画布上绘制它

1 个答案: