html 中的咖啡脚本实现答案

【问题标题】：coffeeScript Implementation in htmlhtml 中的咖啡脚本实现
【发布时间】：2017-10-01 02:24:14
【问题描述】：

实际上我是 Coffeescript 和 sketch.js 的新手。所以我想知道我可以在html中实现coffeescript的方式。

确切地说，我想在 html5 画布中实现http://codepen.io/anon/pen/YVxzyJ sketch.js 气泡示例，其中包含咖啡脚本。我尝试搜索，但没有找到任何有用的解决方案。

 # 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; 
}

你的回答对我很有帮助。

【问题讨论】：

就compile咖啡脚本....
@abhieshek 我已经回答了你的问题，请查收。

标签： javascript html coffeescript html5-canvas sketch.js

【解决方案1】：

如果您希望在 html 中实现咖啡脚本，请查看 this。

您只需添加一个<script type="text/coffeescript" src="app.coffee"></script> 即可在 HTML 文件中执行咖啡脚本代码。

在其他情况下，我看到人们使用 type="coffeescript" 和 type="coffee" 的属性，所以它们也可能对你有用。

【讨论】：

【解决方案2】：

你可以使用cdn coffee script 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>

【讨论】：