Html Canvas Click draw picture problem

The requirement is to click the button to draw the specified picture on the canvas in the same path as the html file location. Load normally when onload is used, but not when click is used.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <canvas></canvas>
    <div class="button_container">
        <button><img src="./1.png">Add Dog 1</button>
    </div>
</body>
<script>
    let canva = document.querySelector("canvas");
    let context = canva.getContext("2d");
    let buttons = document.querySelector(".button_container").querySelectorAll("button");

    class image{
        constructor(path,xpos,ypos,height,width){
            this.path=path;
            this.xpos=xpos;
            this.ypos=ypos;
            this.height=height;
            this.width=width;
        }
    }

    let image1 = new image('1.png',10,50,100,100);

    buttons[0].addEventListener("click",draw(context,image1.path,image1.xpos,image1.ypos,image1.height,image1.width));

    function draw(context,path,xpos,ypos,height,width){
        let img = document.createElement('img');
        img.src=path;
        /*img.onload=function(){
            context.drawImage(img,xpos,ypos,height,width);
        }*/
        context.drawImage(img,xpos,ypos,height,width);
    }
</script>
</html>

May I ask what is the cause of the problem? How should it be modified?

Good Question 0Comment Collection Report

0 Answer

dhxqh1002 注册会员
2023-02-27 11:35

the reference answer GPT ᴼ ᴾ ᴱ ᴺ ᴬ ᴵ < br / > the cause of the problem is buttons[0].addEventListener("click",draw(context,image1.path,image1.xpos,image1.ypos,image1.height,image1.width)); The draw function in this line of code is actually executed immediately, rather than being called when the button is clicked. This is because the second argument passed to addEventListener should be a function, not the result of a function call.

To fix this, change this line of code to the following form:

buttons[0].addEventListener("click", function() {
  draw(context,image1.path,image1.xpos,image1.ypos,image1.height,image1.width);
});

This way, the draw function is not executed immediately when the code loads, but is called only when the button is clicked.

Agree 0 0Comment

a251010547 注册会员
2023-02-27 11:35

,function(){ draw ( context , image1.path, image1.xpos, image1.ypos, image1. height , image1. width ) } ); .

< !- - - - - >

Agree 0 0Comment

About the Author

: dinghao851105 注册会员
这家伙很懒，什么都没留下...

0: Answer

0: Article

0: Question

Question Info

Publish Time: 2023-02-27 11:35

Update Time: 2023-02-27 11:35