console
function init(){
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
var graphics = circle.graphics
let x = 10
let y = 250
let len = 480
for(let i = 0; i < 3; i++){
drawCurve(graphics,10 + i *30,400 - i *100,480-i*60)
}
stage.addChild(circle);
stage.update();
createStar(stage)
}
function drawCurve(graphics,startX,startY,len){
graphics.beginFill('yellow')
graphics = graphics.setStrokeStyle(2).beginStroke("black").moveTo(startX,startY)
const gap = 40
let xRate = 0
console.log(len)
for(let i = gap; i < len; i+=gap){
const cy = i/gap % 2 === 0 ? startY - gap : startY + gap
const x = startX + i
xRate = i <= len/2 ? xRate + 5 : xRate - 5
graphics.curveTo(x - gap/2, cy+ xRate,x,startY + xRate);
}
graphics.endFill();
}
function createStar(stage){
var circle = new createjs.Shape();
var graphics = circle.graphics
graphics = graphics.setStrokeStyle(2).beginStroke("yellow")
let rx = 235
let ry = 35
let radius = 30
let radius2 = 15
graphics.moveTo(rx+Math.cos(342*Math.PI/180) * radius,ry+Math.sin(342*Math.PI/180) * radius)
let color = 'blue'
let alpha = 1
let rate = -0.04
circle.shadow = new createjs.Shadow(color, 0, 5, 5);
for(let i = 0; i < 5; i++){
const deg = (54 + i * 72)%360
const deg3 = (18 + i * 72)%360
const x = rx + Math.cos(deg*Math.PI/180) * radius
const y = ry + Math.sin(deg*Math.PI/180) * radius
const x3 = rx + Math.cos(deg3*Math.PI/180) * radius2
const y3 = ry + Math.sin(deg3*Math.PI/180) * radius2
graphics.lineTo(x3,y3)
graphics.lineTo(x,y)
}
stage.addChild(circle);
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
console.debug(event)
circle.shadow = new createjs.Shadow(createjs.Graphics.getRGB(0,0,255, alpha), 0, 5, 5);
alpha += rate
if(alpha <= 0 || alpha >= 1){
rate = 0 - rate
}
stage.update();
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=">
<meta http-equiv="X-UA-Compatible" content="">
<title></title>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="500"></canvas>
</body>
</html>