Canvas 非常新。我创建了一个对象“三角形”，并想出了如何实例化它并让它沿 x 轴和 y 轴移动。我什至想出了如何添加交互性（在鼠标悬停时，对象改变方向）。让我着迷的是旋转。我已经尝试了一百万种方法，但就是不明白该怎么做。我已经设法让整组对象似乎在 0, 0 点旋转。我希望每个对象都在自己的轴上旋转。任何帮助，将不胜感激！
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
img = new Image();
var randomNumber = getRandomInt(2);
var imgArray = ["https://i.imgur.com/efLA0Or.jpg?1", "https://i.imgur.com/efLA0Or.jpg?1"];
img.src = imgArray[randomNumber];
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var mouse = {
x: undefined,
y: undefined
}
window.addEventListener('mousemove',
function(event) {
mouse.x = event.x;
mouse.y = event.y;
})
function Circle(x, y, dx, dy, radius, rotation) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.draw = function() {
c.drawImage(img, this.x, this.y, 100, 100);
}
this.update = function() {
c.rotate(rotation);
if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
this.dx = -this.dx;
}
if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
this.dy = -this.dy;
}
this.y += this.dy;
//interactivity
if (mouse.x - this.x < 100 && mouse.x - this.x > -100
&& mouse.y - this.y < 100 && mouse.y - this.y > -100
) {
this.dx = -dx * 2;
this.dy = -dy * 2;
}
this.draw();
}
}
var circleArray = [];
for (var i = 0; i < 100; i++) {
var x = Math.random() * (innerWidth - radius * 2) + radius;
var y = Math.random() * (innerHeight - radius * 2) + radius;
var dx = (Math.random() - 0.5) * 1;
var dy = (Math.random() - 0.5) * 1;
var radius=30;
var rotation = Math.PI/180;
circleArray.push(new Circle(x, y, dx, dy, radius, rotation));
}
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, innerWidth, innerHeight);
for (var i = 0; i < circleArray.length; i++){
circleArray[i].update();
}
}
animate();<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="canvas.css">
<script src="canvas.js"></script>
</head>
<body>
<div id="container">
<canvas></canvas>
<script src="canvas.js"></script>
</div>
</body>
</html>你有一些错误。这就是它不起作用的原因。你有一些未声明的变量。另外：我会以不同的方式进行鼠标检测。
我已经将旋转放在 Circle 的 draw 方法中。由于该方法称为 Circle，因此我已将您的图像剪裁成圆形。如果你不想要这个，请移除弧线和剪辑部分。
var canvas = document.querySelector('canvas');
var innerWidth = canvas.width = window.innerWidth;
var innerHeight = canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
var radius=30;
//var rotation = Math.PI/180;
img = new Image();
var randomNumber = getRandomInt(2);
var imgArray = ["https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg"];
img.src = imgArray[randomNumber];
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var mouse = {
x: undefined,
y: undefined
}
window.addEventListener('mousemove',
function(event) {
mouse.x = event.x;
mouse.y = event.y;
})
function Circle(x, y, dx, dy, radius) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.rotation = Math.PI*Math.random();
this.draw = function() {
c.save();
c.translate(this.x,this.y);
c.rotate(this.rotation);
c.beginPath();
c.arc(0,0,this.radius,0,2*Math.PI);
c.clip();
c.drawImage(img, -this.radius, -this.radius, this.radius*2, this.radius*2);
c.restore();
}
this.update = function() {
if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
this.dx = -this.dx;
}
if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
this.dy = -this.dy;
}
this.x += this.dx;
this.y += this.dy;
//interactivity
if (mouse.x - this.x < 100 && mouse.x - this.x > -100
&& mouse.y - this.y < 100 && mouse.y - this.y > -100
) {
this.dx = -dx * 2;
this.dy = -dy * 2;
}
this.draw();
}
}
var circleArray = [];
for (var i = 0; i < 100; i++) {
var x = Math.random() * (innerWidth - radius * 2) + radius;
var y = Math.random() * (innerHeight - radius * 2) + radius;
var dx = (Math.random() - 0.5) * 1;
var dy = (Math.random() - 0.5) * 1;
circleArray.push(new Circle(x, y, dx, dy, radius));
}
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, innerWidth, innerHeight);
for (var i = 0; i < circleArray.length; i++){
circleArray[i].update();
}
}
animate();<div id="container">
<canvas></canvas>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句