HTML5/Canvas鸟笼（鸟巢）线条编织动画

Canvas scribble, 用线条编织圆形。

html5, lines

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2702
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

class Circle {
  constructor( x, y, radius ) {
    this.position = { 'x': x, 'y': y }
    this.radius = radius
  }
}

class Experience {
  constructor( container ) {
    console.clear()

this.canvas = document.createElement( 'canvas' )
    container.appendChild( this.canvas )
    this.context = this.canvas.getContext( '2d' )

const fps = 120
    this.fpsInterval = 1000 / fps
    this.then = Date.now()

this.resize()

this.lineWidth = 0.1
    this.maxLineAngle = 180
    this.circles = []
    const circlesNumber = 200
    let failsNumber = 0
    
    let i = 0
    while( i < circlesNumber ) {
      const x = Math.random() * this.canvas.width
      const y = Math.random() * this.canvas.height
      const radius = Math.random() * 70 + 10

// Don't judge me please :(
      // I'm tired :(
      const newCircle = new Circle( x, y, radius )
      this.circles.push( newCircle )
      i++

for( let circle of this.circles ) {
        if( circle != newCircle ) {
          const distanceX = circle.position.x - x
          const distanceY = circle.position.y - y
          const distance = Math.sqrt( distanceX * distanceX + distanceY * distanceY )

if( distance < circle.radius + radius ) {
            this.circles.pop()
            failsNumber++
            i--
          }
        }
      }
      
      if( failsNumber > 10000 ) {
        break
      }
    }
    
    const gui = new dat.GUI()
    const lineWidthGUI = gui.add( this, 'lineWidth', 0.1, 20 ).name( 'Line width' ).step( 0.1 )
    const lineAngleGUI = gui.add( this, 'maxLineAngle', 1, 180 ).name( 'Line max angle' ).step( 1 )

lineWidthGUI.onFinishChange( ( value ) => {
      this.resize()
    } )
    
    lineAngleGUI.onFinishChange( ( value ) => {
      this.resize()
    } )

gui.close()

this.bind()
    this.loop()
  }
 
  bind() {
    window.addEventListener( 'resize', this.resize.bind( this ), false )
  }

render() {
    for( let circle of this.circles ) {
      const startAngle = Math.random() * 360 * Math.PI / 180
      const endAngle = startAngle + Math.random() * this.maxLineAngle * Math.PI / 180

this.context.save()
      this.context.translate( circle.position.x, circle.position.y )
      this.context.beginPath()
      this.context.moveTo( Math.cos( startAngle ) * circle.radius, Math.sin( startAngle ) * circle.radius )
      this.context.lineTo( Math.cos( endAngle ) * circle.radius, Math.sin( endAngle ) * circle.radius )
      this.context.lineWidth = this.lineWidth
      this.context.strokeStyle = getRandomColor()
      this.context.stroke()
      this.context.closePath()
      this.context.restore()
    }
  }

loop() {
    this.raf = window.requestAnimationFrame( this.loop.bind( this ) )

const now = Date.now()
    const delta = now - this.then

if( delta > this.fpsInterval ) {
      //this.context.clearRect( 0, 0, this.canvas.width, this.canvas.height )
      this.render()
      this.then = now
    }
  }

resize() {
    this.canvas.width = window.innerWidth
    this.canvas.height = window.innerHeight
    this.screen = {
      'center': { 'x': this.canvas.width / 2, 'y': this.canvas.height / 2 },
      'hypotenuse': Math.sqrt( ( this.canvas.width / 2 * this.canvas.width / 2 ) + ( this.canvas.height / 2 * this.canvas.height / 2 ) )
    }
    
    this.reset()
  }
  
  reset() {
    window.cancelAnimationFrame( this.raf )
    this.context.clearRect( 0, 0, this.canvas.width, this.canvas.height )
    this.loop()
  }
}

const getRandomColor = () => {
  const value = Math.floor( Math.random() * 255 )
  return '#' + value.toString( 16 ) + value.toString( 16 ) + value.toString( 16 )
}

const container = document.getElementById( 'canvas' )
const experience = new Experience( container )

编译

CSS

HTML

Canvas scribble, 用线条编织圆形。

html5, lines

编辑器支持Emmet

快捷键

Canvas scribble, 用线条编织圆形。

html5, lines

HTML5 Canvas光线游走的蜂巢（六边形网格）动画

HTML5/Canvas回形线条编织艺术图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：