HTML中的coffeeScript實現

Question

實際上，我是Coffeescript和sketch.js的新手。 所以我想知道我可以在html中實現coffeescript的方式。

確切地說，我想在html5畫布中實現http://codepen.io/anon/pen/YVxzyJ的sketch.js氣泡示例，其中包含coffeescript。 我嘗試搜索，但沒有找到任何有用的解決方案。

 # General Variables
sketch = Sketch.create()
particles = []
particleCount = 750
sketch.mouse.x = sketch.width / 2
sketch.mouse.y = sketch.height / 2
sketch.strokeStyle = 'hsla(200, 50%, 50%, .4)'
sketch.globalCompositeOperation = 'lighter'

# Particle Constructor
Particle = ->
  this.x = random( sketch.width ) 
  this.y = random( sketch.height, sketch.height * 2 )
  this.vx = 0
  this.vy = -random( 1, 10 ) / 5
  this.radius = this.baseRadius = 1
  this.maxRadius = 50  
  this.threshold = 150
  this.hue = random( 180, 240 )

# Particle Prototype
Particle.prototype =
  update: ->
    # Determine Distance From Mouse
    distx = this.x - sketch.mouse.x
    disty = this.y - sketch.mouse.y
    dist = sqrt( distx * distx + disty * disty )

    # Set Radius
    if dist < this.threshold
      radius = this.baseRadius + ( ( this.threshold - dist ) / this.threshold ) * this.maxRadius
      this.radius = if radius > this.maxRadius then this.maxRadius else radius
    else
      this.radius = this.baseRadius

    # Adjust Velocity
    this.vx += ( random( 100 ) - 50 ) / 1000
    this.vy -= random( 1, 20 ) / 10000

    # Apply Velocity
    this.x += this.vx
    this.y += this.vy

    # Check Bounds   
    if this.x < - this.maxRadius || this.x > sketch.width + this.maxRadius || this.y < - this.maxRadius
      this.x = random( sketch.width )      
      this.y = random( sketch.height + this.maxRadius, sketch.height * 2 )
      this.vx = 0
      this.vy = -random( 1, 10 ) / 5
  render: ->
    sketch.beginPath()
    sketch.arc( this.x, this.y, this.radius, 0, TWO_PI )
    sketch.closePath()
    sketch.fillStyle = 'hsla(' + this.hue + ', 60%, 40%, .35)'
    sketch.fill()
    sketch.stroke()

# Create Particles
z = particleCount
while z--
  particles.push( new Particle() )

# Sketch Clear
sketch.clear = ->
  sketch.clearRect( 0, 0, sketch.width, sketch.height )

# Sketch Update
sketch.update = ->
  i = particles.length
  particles[ i ].update() while i--

# Sketch Draw
sketch.draw = ->  
  i = particles.length
  particles[ i ].render() while i--

這是用於在sketch.js中創建氣泡示例的coffeescript，它只有CSS，如下所示：

canvas {
  background: #023;
  display: block; 
}

您的回答對我真的很有幫助。

Answer 1

如果您要在html中實現coffee腳本，請查看this 。

您只需要添加<script type="text/coffeescript" src="app.coffee"></script>即可在HTML文件中執行coffee腳本代碼。

在其他情況下，我看到人們使用type="coffeescript"和type="coffee"的屬性，因此它們也可能對您type="coffeescript" 。

Answer 2

您可以通過使用cdn coffee腳本cdn

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script> <title>CoffeScript on browser</title> </head> <body> <canvas id="myChart"></canvas> <script type="text/coffeescript"> alert 'It works!' ctx = document.getElementById('myChart').getContext('2d') chart = new Chart(ctx, type: 'bar' data: labels: [ 'January' 'February' 'March' 'April' 'May' 'June' 'July' ] datasets: [ { label: 'My First dataset' backgroundColor: 'rgb(255, 99, 132)' borderColor: 'rgb(255, 99, 132)' data: [ 0 10 5 2 20 30 45 ] } ] options: {}) </script> </body> </html>

HTML中的coffeeScript實現

問題描述

2 個解決方案

解決方案1
0

解決方案2
0 2018-12-06 10:22:26

HTML中的coffeeScript實現

問題描述

2 個解決方案

解決方案1 0

解決方案2 0 2018-12-06 10:22:26

解決方案1
0

解決方案2
0 2018-12-06 10:22:26