mirror of
https://github.com/tweenjs/tween.js.git
synced 2025-12-08 20:16:12 +00:00
60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
function createGraph(t, f, c) {
|
|
const width = 180
|
|
const height = 100
|
|
const toPhysicalPx = cssPx => cssPx * devicePixelRatio
|
|
|
|
var div = document.createElement('div')
|
|
div.style.display = 'inline-block'
|
|
// +20 for padding
|
|
div.style.width = width + 20 + 'px'
|
|
div.style.height = height + 20 + 'px'
|
|
|
|
var canvas = document.createElement('canvas')
|
|
canvas.style.width = width + 'px'
|
|
canvas.style.height = height + 'px'
|
|
canvas.width = toPhysicalPx(width)
|
|
canvas.height = toPhysicalPx(height)
|
|
|
|
var context = canvas.getContext('2d')
|
|
context.fillStyle = 'rgb(250,250,250)'
|
|
context.fillRect(0, 0, toPhysicalPx(width), toPhysicalPx(height))
|
|
|
|
context.lineWidth = toPhysicalPx(1)
|
|
context.strokeStyle = 'rgb(230,230,230)'
|
|
|
|
context.beginPath()
|
|
context.moveTo(0, toPhysicalPx(20))
|
|
context.lineTo(toPhysicalPx(width), toPhysicalPx(20))
|
|
context.moveTo(0, toPhysicalPx(80))
|
|
context.lineTo(toPhysicalPx(width), toPhysicalPx(80))
|
|
context.closePath()
|
|
context.stroke()
|
|
|
|
context.lineWidth = toPhysicalPx(2)
|
|
context.strokeStyle = 'rgb(255,127,127)'
|
|
context.beginPath()
|
|
context.moveTo(toPhysicalPx(5), toPhysicalPx(80))
|
|
context.lineCap = 'round'
|
|
|
|
var position = {x: toPhysicalPx(5), y: toPhysicalPx(80)}
|
|
|
|
new TWEEN.Tween(position)
|
|
.to({x: toPhysicalPx(175)}, 2000)
|
|
.easing(TWEEN.Easing.Linear.None)
|
|
.start()
|
|
new TWEEN.Tween(position)
|
|
.to({y: toPhysicalPx(20)}, 2000)
|
|
.easing(f)
|
|
.onUpdate(function () {
|
|
context.lineTo(position.x, position.y)
|
|
context.stroke()
|
|
})
|
|
.start()
|
|
|
|
div.appendChild(document.createTextNode(t))
|
|
div.appendChild(document.createElement('br'))
|
|
div.appendChild(canvas)
|
|
|
|
return div
|
|
}
|