coffeeScript Implementation in html
Question
Actually i am new to Coffeescript and sketch.js. So i wanted to know the way i can implement coffeescript in html.
To be precise i want to implement http://codepen.io/anon/pen/YVxzyJ the sketch.js bubble example in html5 canvas where it includes coffeescript. I tried to search but i didn't found any useful solutions.
# 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--
This is the coffeescript used to create bubble example in sketch.js and it only has css which is as follows:
canvas {
background: #023;
display: block;
}
Your answer would be really helpful for me.
2 answers
solution1
0
If you are looking to implement coffee script in html, take a look at this .
You simple need to add a <script type="text/coffeescript" src="app.coffee"></script> to execute coffee script code in an HTML file.
In other cases, I've seen people use the attributes of type="coffeescript" and type="coffee" , so they might work for you as well.
solution2
0 2018-12-06 10:22:26
You it is possible by using the 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.