炫彩小球案例
Posted 她还会来吗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了炫彩小球案例相关的知识，希望对你有一定的参考价值。
前言
以下是利用canvas实现炫彩小球的效果,需要利用基础的前端知识,我就来为大家展示一下叭
效果图如下
html
<body>
<canvas width="800" height="500"></canvas>
</body>
css
给画布设置边框样式
<style>
canvas{
border: 1px solid #000;
background-color: #ccc;
}
</style>
js(重点)
// 得到画布
var canvas = document.querySelector('canvas');
// 获取上下文
var ctx = canvas.getContext("2d");
// 球类
function Ball(x,y,r){
this.x = x;
this.y = y;
// 初始半径
this.r = r;
// 设置随机颜色
this.color = getColor();
// 设置行进方向
this.dx = parseInt(Math.random()*10 - 5);
// 设置行进方向
this.dy = parseInt(Math.random()*10 - 5);
// 将这个小球维护到数组中
ballArr.push(this);
}
Ball.prototype.update = function(){
// 小球的运动
this.x+=this.dx;
this.y+=this.dy;
this.r-=0.1;
if(this.r<0)
{
this.remove();
}
}
Ball.prototype.remove = function(){
for(var i = 0;i<ballArr.length;i++)
{
if(ballArr[i]==this)
{
ballArr.splice(i,1);
}
}
}
// 渲染小球
Ball.prototype.render = function(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
ctx.fillStyle=this.color;
ctx.fill();
}
// 给小球设置鼠标监听,鼠标移动的过程中创建小球
canvas.addEventListener('mousemove',function(e){
new Ball(e.offsetX,e.offsetY,30);
})
// 维护小球的数组
var ballArr = [];
// 定时器进行动画渲染和更新
setInterval(function(){
// 动画的逻辑-清屏-更新
ctx.clearRect(0,0,canvas.width,canvas.height)
for(var i =0;i<ballArr.length;i++){
ballArr[i].update();
if(ballArr[i])
{
ballArr[i].render();
}
}
},10)
function getColor(){
var array = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e'];
var color = "#";
// 采用六进制颜色输出
for(var i = 0 ;i < 6;i++)
{
var random = parseInt(Math.random()*array.length);
// 拼接颜色
color+=array[random];
}
return color;
}
结语
初学canvas,还不能实现实现很多炫酷的效果,不过我会努力学习的！！！
书山有路勤为径,学海无涯苦做舟
---不知道谁写的(好像是韩愈)
以上是关于炫彩小球案例的主要内容，如果未能解决你的问题，请参考以下文章