如何在 html 的画布元素中添加两个图像 ..？答案

【问题标题】：How to add two image in canvas element in html..?如何在 html 的画布元素中添加两个图像 ..？
【发布时间】：2020-10-13 18:49:27
【问题描述】：

到目前为止，我创建了一个画布，并在另一个上添加了两个图像。如何创建一个橡皮擦来擦除上面的图像，然后显示它下面的图像..请帮助我..

这对我来说非常重要..我哥哥的生日让我感到惊讶...请帮助我..谢谢.. 我只是想知道..

如何在画布上添加两个图像？在我的代码中是正确的..？
如何在 JavaScript 中使用 touchmove 创建清除上图的橡皮擦

javaScript

window.addEventListener("click",play);
function play() { document.getElementById("song").play();
}
window.onload = function () {
       
       var img1= new Image();
       
        img1.src = 'https://dl.dropbox.com/s/xxz0nbrplhst2w2/20201010_174008.jpg?';
        img1.onload = function () 
        {
            filling1(img1);       
        }
        
        
        var img2=new Image();
  
        img2.src= 
"https://dl.dropbox.com/s/zpoxft30lzrr5mg/20201012_102150.jpg";
  img2.onload = function () 
        {
            filling2(img2);       
        }
        
        
        function filling1(img) {
 var canvas= document.getElementById('canvas');
       var ctx = canvas.getContext('2d');
       canvas.width = img.width;
       canvas.height = img.height;      
       ctx.drawImage(img,0,0,1012,1012);
            
        }
        
        
        function filling2(img) {
 var canvas= document.getElementById('canvas');
       var ctx = canvas.getContext('2d');
       canvas.width = img.width;
       canvas.height = img.height;      
       ctx.drawImage(img,0,0,1078,1260);
            
        }
        
     }

CSS

body { background: #dddddd;
 }
 canvas 
 { 
  margin: 50px;
  padding: 0px;
  border: thin inset #aaaaaa; 
  width: 300px; 
  height: 400px; 
  position:absolute;
  background-image:url("");
 
 }

HTML

<!DOCTYPE html> 
<html>
 <head> 
 <title>Canvas</title>
 
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
 
 </head>
 <body> 
 <div>
 <canvas id="canvas"> Canvas not supported </canvas> 
 </div>
 <audio controls style="display:none;"loop id="song" >
 <source src="https://dl.dropbox.com/s/bsgain4rsi5q44m/Happy-Birthday-Instrumental">
    <!--   <source src="https://dl.dropbox.com/s/bbxas9a8jvts3ng/birthday%20wishes%20song%20slow%20motion">   -->
  
  <script>
   
   
  Swal.fire("Just Scratch It").then((value)=> {Swal.fire('I hope you like it','Thank you','success');});

  </script>
  
  </audio>
 
 
 </body> 
</html>

这是 touchmove 的另一个代码，但它不能用作橡皮擦..为什么..？

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
    <canvas id="canvas"></canvas>
    <script>
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 380;
var mx, my;
function Circle(x, y){
    this.x = x;
    this.y = y;
    this.radius = 30;
    this.draw = function(){
    c.beginPath();
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    c.stroke();
}
    this.update = function(){
    canvas.addEventListener("touchmove",      
    function(e){
    mx = e.touches[0].clientX;
    my = e.touches[0].clientY;
    circle.x = mx;
    circle.y = my;
});
    if(this.x + this.radius > canvas.width){
    this.x = canvas.width / 2;
}
    if(this.x - this.radius < 0){
     this.x = canvas.width / 2;   
    }
    if(this.y + this.radius > canvas.height){
    this.y = canvas.height / 2;
}
    if(this.y - this.radius < 0){
     this.y = canvas.height / 2;   
    }
     circle.draw()
}
}

var circle = new Circle(100, 100);
function a(){
    requestAnimationFrame(a);
    c.clearRect(0, 0, canvas.width, canvas.height);
    circle.update();
}
a();
    </script>
    </body>
</html>

【问题讨论】：

标签： javascript html css canvas

【解决方案1】：

window.addEventListener("click",play);
function play() { document.getElementById("song").play();}

var canvas= document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 400;

window.onload = function () {
  var img = new Image();
  img.onload = () => ctx.drawImage(img,0,0,300,400);
  img.src = "https://dl.dropbox.com/s/zpoxft30lzrr5mg/20201012_102150.jpg";
}

function Circle(x, y){
  this.x = x;
  this.y = y;
  this.radius = 30;
  this.draw = function(){  
    ctx.save();
    ctx.globalCompositeOperation = 'destination-out';
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
    ctx.restore();
  }
}
var circle = new Circle(100, 100);

canvas.addEventListener("touchmove", function(e){
    var mx = e.touches[0].clientX;
    var my = e.touches[0].clientY;
    move(mx, my);
});

canvas.addEventListener("mousemove", function(e){
    var mx = e.offsetX;
    var my = e.offsetY;
    move(mx, my);
});

function move(x,y){
  circle.x = x;
  circle.y = y;
  circle.draw();
}

body { background: #dddddd;}
canvas { 
  margin: 20px;
  padding: 0px;
  border: thin inset #aaaaaa; 
  width: 300px; 
  height: 400px;
  position:absolute;
  background-image: url("https://dl.dropbox.com/s/xxz0nbrplhst2w2/20201010_174008.jpg");
  background-size: 100% 100%;;
}

<!DOCTYPE html> 
<html>
 <head> 
   <title>Canvas</title>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
 </head>
 <body> 
   <div>
     <canvas id="canvas"> Canvas not supported </canvas> 
   </div>
  <audio controls style="display:none;"loop id="song" >
  <source src="https://dl.dropbox.com/s/bsgain4rsi5q44m/Happy-Birthday-Instrumental">
    <!--   <source src="https://dl.dropbox.com/s/bbxas9a8jvts3ng/birthday%20wishes%20song%20slow%20motion">   -->
  </audio>
  <script> 
    Swal.fire("Just Scratch It").then((value)=> {Swal.fire('I hope you like it','Thank you','success');});
  </script>  
 </body> 
</html>

【讨论】：