前端开发canvas鼠标滑过动画

移动端前端开发框架

前端界面快速开发框架

电商网站前端开发框架

html 代码

<!DOCTYPE html>

<head>

<title>Document</title>

body {

margin: 0;

padding: 0;

}

#canvas {

background-color: #000;

}

</style>

</head>

<body>

var canvas = document.getElementById(‘canvas’);

var w = canvas.width = window.innerWidth;

var h = canvas.height = window.innerHeight;

//获取浏览器窗口的高宽，outerWidth 和 outerHeight包含工具条和滚动条窗口的宽度和高度

var ctx = canvas.getContext(‘2d’);

var nums = 2;//生成个数

var Obj = [];//保存属性

var colors = [‘red’, ‘blue’, ‘green’, ‘yellow’];//颜色设置

canvas.onmousemove = function (ev) {

var x = ev.clientX;

var y = ev.clientY;

//获取时间被触发时鼠标指针在浏览器页面的坐标位置

//在 IE 以外的浏览器，使用 window.pageXOffset 和 window.pageYOffset 即可

for (var i = 0; i < nums; i++) {

var o = {< br />

x: Math.random() * 30 + x, //0-30

y: Math.random() * 30 + y, //0-30

r: Math.round(Math.random() * 20 + 1),

color: colors[Math.floor(Math.random() * colors.length)],

vx: Math.random() * 3, //-3 – 0

vy: Math.random() * 3 //-3 – 0

//random 去0-1随机数

}

Obj.push(o);//push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

if (Obj.length == 300) {

Obj.shift();//shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

}

circle(ctx, Obj[i].x, Obj[i].y, Obj[i].r, Obj[i].color);

} < br />

}

//绘制圆形

function circle(cxt, x, y, r, color) {

ctx.save();

cxt.beginPath();

ctx.arc(x, y, r, 0, 2 * Math.PI);

ctx.fillStyle = color;

ctx.fill();

ctx.restore();

}

!function animate() {

ctx.clearRect(0, 0, w, h);

for (var i = 0; i < Obj.length; i++) {

Obj[i].x += Obj[i].vx;

Obj[i].y += Obj[i].vy;

if (Obj[i].x > w || Obj[i].x < 0) {

Obj[i].vx = -Obj[i].vx;

} else if (Obj[i].y > h || Obj[i].y < 0) {

Obj[i].vy = -Obj[i].vy;

}

circle(ctx, Obj[i].x, Obj[i].y, Obj[i].r, Obj[i].color);

}

window.requestAnimationFrame(animate);

}();

</script>

</body>

</html>

webapp前端开发框架

web前端页面开发框架

前端开发面试框架问题

前端开发canvas鼠标滑过动画

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发