Javascript:单击已调整大小的窗口不起作用_Javascript_Html_Canvas

Javascript:单击已调整大小的窗口不起作用

javascript html canvas

Javascript:单击已调整大小的窗口不起作用,javascript,html,canvas,Javascript,Html,Canvas,我刚开始学习如何在我的网页中显示动画，但我不知道我在最近的项目中做错了什么：它应该在我的窗口周围显示和移动一些彩色的圆圈，并在用户每次单击窗口时创建一个新的圆圈，但我一直把鼠标的X和Y位置弄错了。由于这个原因，当我点击窗口时产生的圆圈永远不会在正确的位置产生，但它会在远离我点击的地方产生这是我的HTML代码： <!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8">

我刚开始学习如何在我的网页中显示动画，但我不知道我在最近的项目中做错了什么：它应该在我的窗口周围显示和移动一些彩色的圆圈，并在用户每次单击窗口时创建一个新的圆圈，但我一直把鼠标的X和Y位置弄错了。由于这个原因，当我点击窗口时产生的圆圈永远不会在正确的位置产生，但它会在远离我点击的地方产生

这是我的HTML代码：

<!DOCTYPE html>

<html lang="it">

<head>
    <meta charset="UTF-8">
    <title>Mitosis Simulation</title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
        }
        h1 {
            border: 0px;
            text-align: center;
            padding: 10px;
        }
        div {
            margin: 0px;
            padding: 0px;
            border: 0px;
            position: relative;
            width: 70%;
            height: 50%;
            left:15%;
        }
        canvas {
            border: 1px solid;
            width: 100%;
            height: 100%;           
        }
    </style>
</head>

<body>
    <h1>Mitosis Simulation</h1>
    <div><canvas></canvas></div>
    <script src="canvas.js"></script>
</body>


</html>


有丝分裂模拟
身体{
填充：0px；
边际：0px；
}
h1{
边界：0px；
文本对齐：居中；
填充：10px；
}
div{
边际：0px；
填充：0px；
边界：0px；
位置：相对位置；
宽度：70%；
身高：50%；
左：15%；
}
帆布{
边框：1px实心；
宽度：100%；
身高：100%；
}
有丝分裂模拟

这是我的Javascript代码：

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');

//***************************************************************
//***************************************************************

var N = 2;  //Number of cells on the screen
var cells = [];  //Array that contains all the cells
var cell;  //single cell

for(var i = 0; i < N; i++)
{
    cell = new Cell(Math.random() * window.innerWidth, Math.random() * window.innerHeight);
    cells.push(cell);
}

function randomColor()
{
    var colore = '#';
    var hexa = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
    var number;
    for(var i = 0; i < 6; i++){
        number = Math.floor(Math.random() * 15.9);
        colore += hexa[number];
    }
    return colore;
}

function ridimensiona()  //ridimensione = resize (italian)
{
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

function evento()
{
    console.log(event);
    cell = new Cell(event.x, event.y);
    cells.push(cell);
    N++;
    // mouse.x = event.x;
    // mouse.y = event.y;
}

window.addEventListener('resize', ridimensiona);
canvas.addEventListener('click', evento);

function Vector(x, y) {
    this.x = x;
    this.y = y;

    this.add = function(v)
    {
        this.x += v.x;
        this.y += v.y;
    }
}

function Cell(x, y) {
    this.pos = new Vector(x, y);
    this.vel = new Vector(Math.random() * 20 - 10, Math.random() * 20 - 10);
    this.r = 20;
    this.color = randomColor();

    this.draw = function()
    {
        c.beginPath();
        c.arc(this.pos.x, this.pos.y, this.r, 0, Math.PI * 2, false);
        c.fillStyle = this.color;
        c.fill();
    }

    this.update = function() {
        if(this.pos.x + this.r > window.innerWidth || this.pos.x - this.r < 0)
            {this.vel.x = -this.vel.x;}
        if(this.pos.y + this.r > window.innerHeight || this.pos.y - this.r < 0)
            {this.vel.y = -this.vel.y;}
        this.pos.add(this.vel);
    }
}


//***************************************************************
//***************************************************************

function animate()
{
    requestAnimationFrame(animate);
    c.clearRect(0, 0, canvas.width, canvas.height);

    for(var i = 0; i < N; i++)
    {
        cells[i].draw();
        cells[i].update();

    }

}

animate();

var canvas=document.querySelector（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var c=canvas.getContext（'2d'）；
//***************************************************************
//***************************************************************
var N=2//屏幕上的单元格数
var单元格=[]//包含所有单元格的数组
var细胞//单细胞
对于（变量i=0；iwindow.innerWidth | | this.pos.x-this.r<0）
{this.vel.x=-this.vel.x；}
if（this.pos.y+this.r>window.innerHeight | | this.pos.y-this.r<0）
{this.vel.y=-this.vel.y；}
此位置添加（此级别）；
}
}
//***************************************************************
//***************************************************************
函数animate（）
{
请求动画帧（动画）；
c、 clearRect（0，0，canvas.width，canvas.height）；
对于（变量i=0；i

我在resize调用中错过了参数！（请参阅联机代码段示例-单击运行）

更好地使用画布调整大小：

canvas.addEventListener('resize', ridimensiona , false );

如果您想访问w/h，在画布html标记中添加宽度和高度参数也很重要：

var canvas=document.querySelector（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var c=canvas.getContext（'2d'）；
//***************************************************************
//***************************************************************
var N=2//屏幕上的单元格数
var单元格=[]//包含所有单元格的数组
var细胞//单细胞
对于（变量i=0；iwindow.innerWidth | | this.pos.x-this.r<0）
{this.vel.x=-this.vel.x；}
if（this.pos.y+this.r>window.innerHeight | | this.pos.y-this.r<0）
{this.vel.y=-this.vel.y；}
此位置添加（此级别）；
}
}
//***************************************************************
//*******************
canvas.addEventListener('resize', ridimensiona , false );