html中的coffeeScript实现
html中的coffeeScript实现
提问于 2017-05-03 18:01:58
实际上，我是第一次接触Coffeescript和sketch.js。所以我想知道如何在html中实现coffeescript。
准确地说，我希望在包含http://codepen.io/anon/pen/YVxzyJ脚本的html5 canvas中实现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;
}你的回答对我真的很有帮助。
回答 2
Stack Overflow用户
发布于 2017-07-25 01:16:53
如果您希望在html中实现咖啡脚本，请看一下this。
您只需要添加一个<script type="text/coffeescript" src="app.coffee"></script>来执行HTML文件中的咖啡脚本代码。
在其他情况下，我见过人们使用type="coffeescript"和type="coffee"的属性，所以它们可能也适用于您。
Stack Overflow用户
发布于 2018-12-06 18:22:26
您可以使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43756911
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号