一.炫彩小球

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>炫彩小球</title><style>canvas{border: 1px solid black;background: #ccc;}</style>
</head>
<body><canvas width="800" height="400" id="myCanvas"></canvas>
</body>
</html>
<script>//获取画布var canvas = document.getElementById("myCanvas");//获取2dvar ctx = canvas.getContext("2d");//球类function Ball(x,y,r){this.x=x;this.y=y;//初始半径this.r=r;//设置随机颜色this.color = getRandom();//设置行进方向this.dx = parseInt(Math.random() * 10) - 5; // -5可以朝着四面八方运动//设置行进方向this.dy = parseInt(Math.random() * 10) - 5; // 如果不减5，就会朝着右、下运动//将这个小球维护到数组中ballArr.push(this);}Ball.prototype.update = function(){//小球的运动this.x += this.dx;this.y += this.dy;this.r -= 0.4;//如果小球的半径小于0，就从数组中删除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,false);ctx.fillStyle=this.color;ctx.fill();};//canvas设置鼠标监听，鼠标移动的过程中创建小球canvas.addEventListener("mousemove",function(event){new Ball(event.offsetX,event.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 getRandom(){var allType = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";var allTypeArr = allType.split(","); //创建一个数组var color = "#";//渲染for(var i = 0;i < 6; i++){var random = parseInt(Math.random()*allTypeArr.length);color += allTypeArr[random]; }return color;}console.log(getRandom());
</script>

二.效果图

篇章

上一篇：canvas教程6-绘制圆弧

下一篇：canvas教程8-小球连线之碰壁则返

canvas教程7-炫彩小球相关推荐

Canvas跟随鼠标炫彩小球
跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思实现效果超级炫酷实现原理创建小球给小球添加随机颜色,随机半径鼠标移动通过实例化,新增小球通过调用给原型新增的方法,来实现小球的动画 ...
超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等...
超多经典 canvas 实例普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...
彩色点缀,canvas炫彩小球样式背景
canvas炫彩小球样式背景效果展示代码如下 1.css * {margin: 0;padding: 0; }.backCanvas canvas {display: block;margin: ...
canvas制作点击/鼠标移动炫彩小球效果
<script>const canvas = document.getElementById('myCanvas')canvas.setAttribute('width', documen ...
传奇一键端服务器维护,烈焰炫彩传奇最终版一键服务端+启动教程+GM工具
烈焰炫彩传奇最终版一键服务端+启动教程+GM工具启动教程: 1.解压资源包,将"LYServer1"文件夹放到D盘根目录.D:\LYServer1 2.打开"D:\LY ...
【UI教程】结合PS和AI绘制炫彩2.5D插画
[UI教程]结合PS和AI绘制炫彩2.5D插画为了此次文章教程,利用下班在家空余时间撸图撸了两个凌晨,原则只做原创精品设计文章,好案例配好文章,希望大家能喜欢,做设计行业文章教程最初目的就是能希望帮 ...
炫彩界面库v1.4.2-360安全卫士v8.5-UI设计器使用教程
炫彩界面库-UI设计器使用教程,该教程以360安全卫士为例. 先上一张最终程序截图文件相对路径 -说明文件的相对路径为UI设计器的路径;例如在UI设计器目录中有个UI项目文件夹[MyProject ...
Photoshop绘制炫彩的的立体圆环LOGO教程
http://www.missyuan.net/school/ps_2014/photoshop_17712.html Photoshop绘制炫彩的的立体圆环LOGO教程时间:2014-12-20 ...
canvas教程大纲
文章目录 canvas教程1-canvas的基本使用 canvas教程2-canvas的编程思想 canvas教程3-用面向对象思维来实现动画 canvas教程4-canvas的绘制功能 canvas ...

canvas教程7-炫彩小球

文章目录

一.炫彩小球

二.效果图

篇章

canvas教程7-炫彩小球相关推荐

最新文章

热门文章