canvas绘制七彩随机小球！

canvas绘制七彩随机小球

1、题目

拿到一个案例，需要在画布上实现不同大小颜色位置的七彩小球，并且要运动起来！

2、思路

（1）、第一步需要在页面上创建画布元素，创建一个数组用来存放随机小球的个数；
（2）、第二步封装一个随机函数，定义圆的位置坐标cx,cy 圆的半径xr ,圆的背景颜色bg,圆每次移动的步长sx,sy，用随机数表示它们，并且把它们放入一个对象中，方便定时器的调用；例如：当数组中存放的小球数量达标了，我们就清楚定时器；
（3）、第三部封装一个函数用来绘制刚刚创建的小球，并且渲染到画布上；
（4）、在渲染之前需要判断小球移动的范围和方向，超出边界我们就取反改变小球所移动的方向，并且绘制小球；
（5）、调用定时器，让小球运动起来；

3、效果展示图

4、写法

创建元素：

创建画布，获取画布，获取画笔；
创建一个存放100个随机小球的数组；

封装随机函数：

判断小球的个数，当定时器调用创建了数量等于100时我们就清除它，不在创建啦；
设置小球的颜色样式，位置，大小，移动距离，移动方向，利用随机数实现的；
将刚刚设置的小球的每一个元素放入到一个对象中，方便以后的调用；
每隔30ms调用下定时器创建一个小球，知道创建到100个为止；

封装绘制函数：

判断小球运动的范围以及方向，由于刚刚创建的画布的宽度高度都为600，小球的半径范围为0 -20，小球的圆心坐标范围为200~400，小球每次移动的距离为-2到1之间，所以当小球移动到画布边缘时，我们就让步长取反将小球的移动方向反过来到达小球运动的目的；
设置小球移动的方向，让他们的原点坐标加上步长
将小球绘制在画布上，并且设置小球的背景颜色；
调用定时器让小球运动起来，实现效果；

5、参考代码块

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}#mycanvas{background-color: black;}</style>
</head>
<body><canvas id="mycanvas" width="600" height="600"></canvas><script>// 随机生成100个小球// 大小不一样  颜色也不一样 移动速度不一样  移动方向不一样var mycanvas = document.getElementById("mycanvas")var cxt = mycanvas.getContext("2d")var arr = [];//装100个小球的对象function getrandom(){//当数组存放了100个小球清楚定时器，将不再产生不同的小球if(arr.length > 100){clearInterval(timer)}//设置随机颜色，采用rgba形式的var r = Math.floor(Math.random()*256)var g = Math.floor(Math.random()*256)var b = Math.floor(Math.random()*256)var a = Math.random()//透明度//随机颜色var bg = "rgba("+ r +","+ g +","+ b +",1)"//半径var xr = Math.floor(Math.random() * 20)//坐标  圆的位置坐标 cx 横坐标  cy 纵坐标var cx = 200 + Math.floor(Math.random()*200)var cy = 200 + Math.floor(Math.random()*200)// 每次移动的步长 sx 左右移动的步长 sy 上下移动的步长var sx = -2 + Math.floor(Math.random() * 4)// -2 -1 0 1var sy = -2 + Math.floor(Math.random() * 4)//将刚刚创建的坐标和步长 颜色 放到一个对象中，方便定时器的调用var obj = {bg : bg,xr : xr,cx : cx,cy : cy,sx : sx,sy : sy}// 步长的取值不为0表示小球能够移动if(sx != 0 || sy != 0){arr.push(obj)}console.log(arr)}var timer = setInterval(getrandom,30)// 封装函数绘制上面所创建的50个小球渲染在画布上面function shop(){cxt.clearRect(0,0,600,600)for(var i = 0 ;i< arr.length;i++){// 判断边界，取反改变小球移动方向if(arr[i].xr + arr[i].cx > 600 || arr[i].cx - arr[i].xr <= 0){arr[i].sx *= -1;}if(arr[i].xr + arr[i].cy > 600 || arr[i].cy - arr[i].xr <= 0){arr[i].sy *= -1;}// 小球移动 上下左右arr[i].cx += arr[i].sx;arr[i].cy += arr[i].sy;// 绘制随机小球cxt.beginPath()cxt.arc(arr[i].cx,arr[i].cy,arr[i].xr,0,Math.PI * 2);cxt.fillStyle = arr[i].bg;cxt.fill()cxt.closePath()}}setInterval(shop,30)</script>
</body>
</html>

6、总结

绘制七彩随机小球，要将canvas画布元素的每个属性了解清楚还要学会在页面绘制圆，并且结合定时器让小球运动起来，这是个综合性的练习，用来巩固H5中的canvas，大家要多多练习！

canvas绘制七彩随机小球！相关推荐

html跳动的小球,canvas绘制跳动的小球
动画反弹 *{ margin:0; padding:0; } canvas1{ box-shadow: 0px 0px 10px red; position: absolute; left:50px; ...
Canvas 绘制背景小球、与鼠标交互的小球
canvas入门,跟随掘金小册如何使用 Canvas 制作出炫酷的网页背景特效学习,完成一个简单的 canvas demo 下面是代码,操作解释都有注释: <!DOCTYPE html> ...
html5绘制随机五角星_HTML5 canvas绘制五角星的方法
这篇文章主要介绍了关于HTML5 canvas绘制五角星的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTM ...
html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
JS打砖块小游戏 canvas绘制
html5 canvas绘制打砖块小游戏源代码 github源码下载地址项目展示下面放上主要代码 index.js代码 var game = {canvas : document.getElem ...
canvas绘制简单动画思路总结
使用canvas绘制动画原理就是不断的绘制canvas图形,当画的速度够快,看上去就能动起来.这里需要了解一下屏幕刷新率,根据效果来调整绘制的速度(1秒刷新60次屏幕刷新率保持在60次/秒保障动画效 ...
html制作动态坐标轴,HTML5 canvas制作动态随机星图
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 本篇将会介绍如何用canvas制作动态随机移动的星图啦啦啦小白在远离小白道路上的第一步就是搭个博客前言这次的博文不 ...
HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）
HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 原文:HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 看到网上很多展示html5雪花飞动 ...
python绘制散点图的函数_Python用PyQt5绘制多彩随机散点图，基本控件之QPainter使用详解...
前面内容,我们详细介绍了PyQt5中弹出式对话框. 回顾下精彩内容 Python用PyQt5制作颜色对话框,PyQt图形界面编程之QColorDialog Qt图形界面编程之QFileDialog类, ...

canvas绘制七彩随机小球！

canvas绘制七彩随机小球

1、题目

2、思路

3、效果展示图

4、写法

5、参考代码块

6、总结

canvas绘制七彩随机小球！相关推荐

最新文章

热门文章