提问一个css3/canvas动画特效

图片描述

中间像分子式一样的球，而且是3d 可以转动的
现在需要做一个这种效果，我初步想有css3和canvas两种实现方式，
各位有没有比较接近的效果代码可以参考呢 ?

阅读 3.4k

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title></title>
<style>

canvas{
  background: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(lightgreen))
}

</style>
</head>
<body>
<canvas width="1000" height="360" id="canvas"></canvas>
<script type="text/javascript">
/**

Created by lenovo on 2017/7/18.
*/

let {random, floor, sqrt, pow, PI} = Math
/*class ball{

constructor(xPointer, yPointer, xDirection, yDirection, radius){
  this.xPointer = xPointer
  this.yPointer = yPointer
  this.vx = random()
  this.vy = random()
  this.xDirection = xDirection
  this.yDirection = yDirection
  this.color = `rgba(${random() * 255}, ${random() * 255}, ${random() * 255}, ${random()})`
  this.radius = radius
}

}*/
function Ball(xPointer, yPointer, xDirection, yDirection, radius){

this.xPointer = xPointer
this.yPointer = yPointer
this.vx = random()
this.vy = random()
this.xDirection = xDirection
this.yDirection = yDirection
this.color = `rgba(${floor(random()*255)},${floor(random()*255)},${floor(random()*255)},${random()})`
this.radius = radius

}

//随机生成方向1为正方向上或右,-1为反方向下或左
function getDirection() {

return floor(random()*2) === 1 ? 1 : -1

}

//得到一个从first到last之间的一个随机数
function getInitPoint(first, last) {

return random() * (last - first) + first

}

//画小球
function drawBall(ball, ctx) {

ctx.beginPath()
ctx.fillStyle = ball.color
ctx.arc(ball.xPointer, ball.yPointer, ball.radius, 0, 2 * PI)
ctx.fill()

}

//判断小球到达边缘改变小球运动方向
function changeDirection(ball, maxX, maxY) {

if((ball.xPointer - ball.radius) <= 0 || (ball.xPointer + ball.radius) >= maxX) {
  ball.xDirection = -ball.xDirection
}
if((ball.yPointer - ball.radius) <= 0 || (ball.yPointer + ball.radius) >= maxY) {
  ball.yDirection = -ball.yDirection
}

}

//两个小球之间的距离在x,y之间的时候画一条线连接两个小球的圆心
function drawLine(ball1, ball2, x, y, ctx) {

let s = sqrt(pow(ball1.xPointer - ball2.xPointer, 2) + pow(ball1.yPointer - ball2.yPointer, 2))
if(s >= x && s <= y) {
  ctx.fillStyle = "red"
  ctx.beginPath()
  ctx.lineWidth = 0.1
  ctx.moveTo(ball1.xPointer, ball1.yPointer)
  ctx.lineTo(ball2.xPointer, ball2.yPointer)
  ctx.stroke()
}

}
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
let ballArr = []
function initBalls() {

for(let i = 0; i < 60; i++) {
  ballArr.push(new Ball(getInitPoint(20, 980), getInitPoint(20, 340), getDirection(), getDirection(), 3))
}

}

function drawBalls(ballArr, ctx) {

ctx.clearRect(0, 0, 1000, 360)
let len = ballArr.length
for(let i = 0; i < len; i ++) {
  ballArr[i].xPointer += ballArr[i].xDirection * ballArr[i].vx
  ballArr[i].yPointer += ballArr[i].yDirection * ballArr[i].vy
  drawBall(ballArr[i], ctx)
  changeDirection(ballArr[i], 1000, 360)
}
for(let i = 0; i < len; i++) {
  for(let j = 0; j < len; j++) {
    drawLine(ballArr[i], ballArr[j],20, 100, ctx)
  }
}

}

initBalls()
let id = setInterval(function(){

drawBalls(ballArr, ctx)

}, 15)

/*canvas.onmousemove = function(e) {

let x = e.offsetX
let y = e.offsetY
let clickBall = new Ball(x, y, 1, 1, 2)
drawBall(clickBall, ctx)
for(let i = 0; i < ballArr.length; i++) {
  drawLine(clickBall, ballArr[i], 20, 200, ctx)
}

}*/

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

这个是我之前写的一个你可以参考参考

提问一个css3/canvas动画特效

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

为什么会出现CORS error？