在点击画布元素时卡住了

问题描述 投票：1回答：1

我正在做一个页面，可以创建不同的颜色。这还不是完全的代码，因为现在卡住了。

基本上是打算让多个圆圈在画布内跳动，并分配不同的颜色，但是，"onclick "不能触发画布上的圆圈。如果信息网站也能分享给我就更好了。

var canvas;
var ctx;
var w = 1100;
var h = 600;

setUpCanvas();

document.querySelector("#button").onclick=click;

function click(){
    var a1 = document.querySelector("#a1").value;
    var a2 = document.querySelector("#a2").value;
    var a3 = document.querySelector("#a3").value;
    var o1 = {
        "x": rand(w),
        "dx": randn(10),
        "y": rand(h),
        "dy": randn(10),
        "r": 30,
        "red": document.querySelector("#Red1").value,
        "green": document.querySelector("#Green1").value,
        "blue": document.querySelector("#Blue1").value,
        "a": a1/100,
        "n": document.querySelector("#Ncircle1").value
    };
    var o2 = {
        "x": rand(w),
        "dx": randn(10),
        "y": rand(h),
        "dy": randn(10),
        "r": 30,
        "red": document.querySelector("#Red2").value,
        "green": document.querySelector("#Green2").value,
        "blue": document.querySelector("#Blue2").value,
        "a": a2/100,
        "n": document.querySelector("#Ncircle2").value
    };
    var o3 = {
        "x": rand(w),
        "dx": randn(10),
        "y": rand(h),
        "dy": randn(10),
        "r": 30,
        "red": document.querySelector("#Red3").value,
        "green": document.querySelector("#Green3").value,
        "blue": document.querySelector("#Blue3").value,
        "a": a3/100,
        "n": document.querySelector("#Ncircle3").value
    };

    for(i=0; i<o1.n; i++){
        circle(o1)
    };
    
    for(i=0; i<o2.n; i++){
        circle(o2)
    };

    for(i=0; i<o3.n; i++){
        circle(o3)
    };

    o1.x += o1.dx;
    o1.y += o1.dy;
    if(o1.x > w - o1.r || o1.x < 0){
        o1.x *= -1;
    };
    if(o1.y < h - o1.r || o1.y < 0){
        o1.y *= -1;
    };

    o2.x += o2.dx;
    o2.y += o2.dy;
    if(o2.x > w - o2.r || o2.x < 0){
        o2.x *= -1;
    };
    if(o2.y < h - o2.r || o2.y < 0){
        o2.y *= -1;
    };

    o3.x += o3.dx;
    o3.y += o3.dy;
    if(o3.x > w - o3.r || o3.x < 0){
        o3.x *= -1;
    };
    if(o3.y < h - o3.r || o3.y < 0){
        o3.y *= -1;
    };

    if(o1.n < 0 ||o2.n<0||o3.n<0){
        console.log("Number can not be negative.")
    };

    circleColour(o1);
    circleColour(o2);
    circleColour(o3);

    console.log(o1.n,o1.red,o1.green,o1.blue,o1.a);
}

function circle(x,y,r,red,green,blue,a){
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.arc(x,y,r,0,2*Math.PI);
    ctx.fillStyle = "rgba("+red+","+green+","+blue+","+a+")";
    ctx.fill();
}

function circleColour(o){
    for(i=0; i<o.n; i++){
        circle(o)
        updateData(o);
    }
}

function randi(r){
    return Math.floor(Math.random()*r)
}

function rand(r){
    return Math.random()*r
}

function randn(r){
    return Math.random()*r - r/2
}

function setUpCanvas(){
    canvas = document.querySelector("#mycanvas");
    ctx = canvas.getContext("2d");
    canvas.width = w;
    canvas.height = h;
    canvas.style.border = "5px solid blue";
}

console.log("Colour Mix");
#container{
    margin: auto;
    width: 80%;
    text-align: center;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="colourmix.css">
    </head>
    <body>
        <div id="container">
            <h1>Colour Mix</h1>
            <canvas id="mycanvas"></canvas>
            <form id="myform">
                <label for="Ncircle1">Number of Group 1 circles</label>
                <input type="number" id="Ncircle1">
                <label for="Red1">Red</label>
                <input type="number" id="Red1">
                <label for="Green1">Green</label>
                <input type="number" id="Green1">
                <label for="Blue1">Blue</label>
                <input type="number" id="Blue1">
                <label for="a1">Opacity</label>
                <input type="number" id="a1">

                <label for="Ncircle2">Number of Group 2 circles</label>
                <input type="number" id="Ncircle2">
                <label for="Red2">Red</label>
                <input type="number" id="Red2">
                <label for="Green2">Green</label>
                <input type="number" id="Green2">
                <label for="Blue2">Blue</label>
                <input type="number" id="Blue2">
                <label for="a2">Opacity</label>
                <input type="number" id="a2">

                <label for="Ncircle3">Number of Group 3 circles</label>
                <input type="number" id="Ncircle3">
                <label for="Red3">Red</label>
                <input type="number" id="Red3">
                <label for="Green3">Green</label>
                <input type="number" id="Green3">
                <label for="Blue3">Blue</label>
                <input type="number" id="Blue3">
                <label for="a3">Opacity</label>
                <input type="number" id="a3">

                <!-- <input type="submit" id="submit" value="Submit"> -->
                <button type="button" onclick="submit">Submit</button>
            </form>
        </div>
        <script src="colourmix.js"></script>
    </body>
</html>
javascript onclick canvasjs
1个回答
0
投票

如果我是你，我会用JQuery实现。你只需要在包含JS文件之前，在你的HTML中添加这一行。

<script src="https://code.jquery.com/jquery-1.11.1.js"></script>

这将包括Jquery允许你做以下事情。

$("button").on( "click", click );

这段代码是运行时，任何元素的类型按钮被点击，并调用函数 点击(). 这将工作，但如果它不工作，你总是可以改变按钮有一个ID，并引用它作为在JQuery中

$("#button").on( "click", click );   // '#' means id, '.' means class and nothing means type

希望对大家有所帮助! 如果你有任何问题，欢迎评论，我会尽力尽快回复。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.