Canvas_鼠标移动炫彩小球

2017-04-06 07:05:42 229 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Canvas 跟随鼠标移动的炫彩小球 1. 初始化Canvas画布 1.1 设置画布参数 <canvas id="mycanvas" width="600" height="600"></canvas> 设置id选择器，并给画布的宽高赋值；注意：宽高必须在行内里面设置，不能设置在css样式中，否则会被拉伸。 1.2 获取canvas元素 var canvas = document.querySelector('#mycanvas') var ctx = canvas.getContext 阅读详情

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>canvas</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="1000" height="600"></canvas>
<script type="text/javascript">

var mycanvas = document.getElementById("mycanvas");
var ctx = mycanvas.getContext("2d");
//圆形类
function Circle(x,y,r,color){
this.x = x;
this.y = y;
this.r = r;
// 颜色的取值范围
this.color = "rgb("+ (parseInt(Math.random() * 240 ) + 9) + ","+ (parseInt(Math.random() * 220 )+18) +",203)";

//随机方向
this.dx = Math.random() * 12 - 7;
this.dy = Math.random() * 12 - 7;
//往数组中push自己
circleArr.push(this);
}

//渲染
Circle.prototype.render = function(){
//新建一条路径
ctx.beginPath();
//创建一个圆
ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
//设置样式颜色
ctx.fillStyle = this.color;
//通过填充路径的内容区域生成实心的图形
ctx.fill();
}
更多资料免费分享加群 120342833 验证回答 ZZ
//更新
Circle.prototype.update = function(){
this.x += this.dx;
this.y += this.dy;
this.r--;
if(this.r < 0){
for (var i = 0; i < circleArr.length; i++) {
if (circleArr[i] === this) {
circleArr.splice(i,1);
};
}
return false;
}
return true;
}
//创建一个数组
var circleArr = [];

//鼠标移动事件
mycanvas.onmousemove = function(event){
new Circle(event.clientX,event.clientY,30,"orange");
}

//设置定时器每20毫秒更新和渲染
setInterval(function(){
ctx.clearRect(0, 0, 1000, 600)
for (var i = 0; i < circleArr.length; i++) {
circleArr[i].update() && circleArr[i].render();
};
},20);

</script>
</body>
</html>

...全文