Javascript 如何在html中的画布元素中添加两个图像。。？_Javascript_Html_Css_Canvas

Javascript 如何在html中的画布元素中添加两个图像。。？

javascript html css canvas

Javascript 如何在html中的画布元素中添加两个图像。。？,javascript,html,css,canvas,Javascript,Html,Css,Canvas,到目前为止，我创建了一个画布，并在另一个画布上添加了两个图像。如何创建一个橡皮擦来划伤上面的图像，然后显示下面的图像..请帮助我这对我来说是非常重要的…我给我哥哥生日一个惊喜…请帮助我…谢谢。。我只是想知道如何在画布上添加两个图像？在我的代码中，它是对的吗如何创建用于清除上部图像的橡皮擦。。在javaScript中使用touchmove javaScript window.addEventListener("click",play); function play(

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

这对我来说是非常重要的…我给我哥哥生日一个惊喜…请帮助我…谢谢。。我只是想知道

如何在画布上添加两个图像？在我的代码中，它是对的吗

如何创建用于清除上部图像的橡皮擦。。在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>


帆布
不支持画布
然后（（值）=>{Swal.fire（'I hope you like'、'thankyou'、'success'）；}）；

这是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>


页面标题
var canvas=document.getElementById（“canvas”）；
var c=canvas.getContext（“2d”）；
画布宽度=300；
高度=380；
var-mx，我的；
函数圆（x，y）{
这个.x=x；
这个。y=y；
这个半径=30；
this.draw=函数（）{
c、 beginPath（）；
c、 弧（this.x，this.y，this.radius，0，Math.PI*2）；
c、 笔划（）；
}
this.update=函数（）{
canvas.addEventListener（“touchmove”，
职能（e）{
mx=e.touchs[0].clientX；
my=e.touchs[0].clientY；
圆x=mx；
圆。y=我的；
});
if（this.x+this.radius>canvas.width）{
这个.x=canvas.width/2；
}
if（this.x-this.radius<0）{
这个.x=canvas.width/2；
}
if（this.y+this.radius>canvas.height）{
这个.y=canvas.height/2；
}
if（this.y-this.radius<0）{
这个.y=canvas.height/2；
}
画圆
}
}
var循环=新循环（100100）；
函数a（）{
请求动画帧（a）；
c、 clearRect（0，0，canvas.width，canvas.height）；
circle.update（）；
}
a（）；

window.addEventListener（“单击”，播放）；
函数play（）{document.getElementById（“歌曲”）.play（）；}
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
画布宽度=300；
画布高度=400；
window.onload=函数（）{
var img=新图像（）；
img.onload=（）=>ctx.drawImage（img，0,0300400）；
img.src=”https://dl.dropbox.com/s/zpoxft30lzrr5mg/20201012_102150.jpg";
}
函数圆（x，y）{
这个.x=x；
这个。y=y；
这个半径=30；
this.draw=函数（）{
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循环=新循环（100100）；
canvas.addEventListener（“触摸移动”，函数（e）{
var mx=e.touchs[0].clientX；
var my=e.touchs[0].clientY；
移动（mx，我的）；
});
canvas.addEventListener（“mousemove”，函数（e）{
var mx=e.offsetX；
var my=e.offsetY；
移动（mx，我的）；
});
功能移动（x，y）{
圆x=x；
圆y=y；
画圆（）；
}

body{背景：#dddddd；}
画布{
利润率：20px；
填充：0px；
边框：薄插图#AAAAA；
宽度：300px；
高度：400px；
位置：绝对位置；
背景图像：url（“https://dl.dropbox.com/s/xxz0nbrplhst2w2/20201010_174008.jpg");
背景尺寸：100%100%；；
}


帆布
不支持画布
然后（（值）=>{Swal.fire（'I hope you like'、'thankyou'、'success'）；}）；