Question

我正在使用画布在另一个图像上绘制精确定位的图像。我是画布的新手;请进一步指导我。

我已经使用img元素并将其复制到画布中。现在我试图在该画布对象上放置另一个图像，但它不起作用。

这是我的Fiddle。

HTML：

<p>Image to use:</p>
<img id="scream" src="https://cdn3.iconfinder.com/data/icons/social-media-icons/32/Location-512.png" alt="The Scream" width="220" height="277">

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

<p><button id="button1">Copy Imange</button></p>
<p><button  id="button2">Draw OVer copied image</button></p>

代码：

  $("#button1").click(function(){
   var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img,10,10);
  });

    $("#button1").click(function(){
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");   
    ctx.drawImage("https://cdn3.iconfinder.com/data/icons/social-media-icons/32/Location-512.png",10,10);
  });

Answer 1

有几个问题。首先，您单击事件都在查找元素drawImage。我假设第二次点击事件应该是var img2 = new Image(); img2.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';

下一个问题，在您的第二次点击事件中，您正在使用从网址到图片的$(document).ready(function(){ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); var img2 = new Image(); img2.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png'; $("#button1").click(function(){ ctx.drawImage(img,10,10); }); $("#button2").click(function(){ ctx.drawImage(img2,10,10); }); });。您无法直接执行此操作，您需要创建一个新图像并设置源属性，如下所示：

sudo rm -r /var/lib/puppet/clientbucket

你也不应该在每次点击时设置画布和上下文，你只需要这样做一次。以下是完整示例(working example)：

{{1}}

如何使用画布在另一个图像上绘制图像

1 个答案: