我刚开始学习如何使用在我的网页中显示动画，我无法弄清楚我在最新项目中做错了什么： 它应该在我的窗口周围显示和移动一些彩色圆圈，并在每次用户点击窗口时创建一个新的圆圈，但我不断地让鼠标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>
这是我的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();
答案 0 :(得分：0)
我在调整大小的电话中错过了参数！ （请参阅代码片段在线示例 - 单击运行）
window.addEventListener('resize', ridimensiona , false );
最好使用canvas进行调整大小：
canvas.addEventListener('resize', ridimensiona , false );
如果您想要使用w / h访问，那么将宽度和高度arg添加到canvas html标记也很重要：
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();<!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 width="1" height="1" ></canvas></div>
<script src="canvas.js"></script>
</body>
</html>