效果图,如下它会随着鼠标的移动而移动 ,小球的个数也会随之由大变小

总代码

<!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>Document</title><style>*{margin:0;padding: 0;}</style>
</head>
<body><canvas id="cont">你好呀</canvas><script>// 使用原生js操作canvas// 1.获取画布var canvas = document.querySelector('#cont')// 2.获取画布的上下文var ctx = canvas.getContext('2d')// 画布宽高// 2.获取窗口可视区域宽高var w = document.documentElement.clientWidth-6var h = document.documentElement.clientHeight-6// 3.更新canvas宽高canvas.width = wcanvas.height = h// 产生随机数function r(num) {return parseInt(Math.random()*num)}// 1.创建小球类function Ball(x,y) {this.x = x this.y = ythis.r = 40  // [10,60)// 随机颜色this.color = '#'+parseInt(Math.random()*0xffffff).toString(16) }// 2.定义小球显示方法Ball.prototype.show = function () {this.r--drawCircle(this.x,this.y,this.r,this.color) //画小球}// 4.创建一个小球的数组(一个大篮子)var ballArr = []// 鼠标滑动事件window.onmousemove=function(e) {var ball = new Ball(e.x,e.y)ballArr.push(ball)ball.show()}//5.小球运动setInterval(() => {// 清除画布ctx.clearRect(0,0,w,h)for (var i = 0; i < ballArr.length; i++) {// 判断:如果小球半径r小于0,需要从数组中删除var ball = ballArr[i]if(ball.r <= 0 ) {ballArr.splice(i,1)} else{ball.show()}}}, 10);/*** 画半圆弧* @description:* @param {type} * @return: */function drawCircle(x,y,r,color){ctx.beginPath()ctx.arc(x,y,r,0,Math.PI*2)ctx.fillStyle= color || '#000'ctx.fill()}</script>
</body>
</html>

canvas 之炫彩小球相关推荐

超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等...
超多经典 canvas 实例普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...
彩色点缀,canvas炫彩小球样式背景
canvas炫彩小球样式背景效果展示代码如下 1.css * {margin: 0;padding: 0; }.backCanvas canvas {display: block;margin: ...
Canvas跟随鼠标炫彩小球
跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思实现效果超级炫酷实现原理创建小球给小球添加随机颜色,随机半径鼠标移动通过实例化,新增小球通过调用给原型新增的方法,来实现小球的动画 ...
canvas教程7-炫彩小球
文章目录一.炫彩小球二.效果图篇章一.炫彩小球 <!DOCTYPE html> <html lang="en"> <head><m ...
canvas制作点击/鼠标移动炫彩小球效果
<script>const canvas = document.getElementById('myCanvas')canvas.setAttribute('width', documen ...
@description iPhoneX炫彩渐变背景实现
/*** @author zhangxinxu(.com)* @description iPhoneX炫彩渐变背景实现* @link http://www.zhangxinxu.com/wordpre ...
炫彩logo粒子效果
前端开发whqet,csdn,王海庆,whqet,前端开发专家昨天我们学习了利用requestAnimationFrame优化动画控制,然后就忍不住冲动,在fork别人codepen的基础上,实现了 ...
互动媒体技术——基于p5.js实现动态图形临摹与拓展：炫彩光影的千变万化！
博文索引目录: 1. 引言 2. 临摹结果对比 3. 临摹过程 3.1 准备工作 3.2 原图规律--语言描述 3.3 原图规律--数学与代码描述 3.4 完整代码 4. 创意拓展 4.1 拓展一-- ...
【Micropython】发光二极管手工制作炫彩跑马灯
2019独角兽企业重金招聘Python工程师标准>>> 先甩锅做完后才发现最后一个灯坏了,就坏了一个灯也不好意思去找淘宝店家,大家视频凑合着看把.不过并不影响实验效果.因为这个发光 ...
炫彩界面库使用方法问题记录
1. 'ele_event' : undeclared identifier 'RegisterAll': identifier not found 在使用炫彩界面库时,如果遇到以上错误,一般是由于 ...

canvas 之炫彩小球

总代码

canvas 之炫彩小球相关推荐

最新文章

热门文章

canvas 之 炫彩小球

总代码

canvas 之 炫彩小球相关推荐

最新文章

热门文章

canvas 之炫彩小球

canvas 之炫彩小球相关推荐