极客观点
项目管理
HarmonyOS
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LTR</title>
<script src="easeljs-0.8.2.min.js"></script>
<style>
body,html{width:100%;height:100%;margin:0;padding:0}
#canvas{background:#000;}
</style>
</head>
<body>
<img src="title.png" alt="tulip" id="tulip" style="display:none;width:100%;height:30%" />
<canvas id="canvas" ></canvas>
<script>
var canvas;
var stage;
var img2 = new Image();
var sprite;
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=document.getElementById("tulip");
document.getElementById("tulip").onload=function(){
canvas.width = img.width;
canvas.height = img.height;
var i = 0;
var timer = setInterval(function(){
if(i < img.width){
i += 10;
ctx.drawImage(img,0,0, i,img.height,0,0,i,img.height);
addS(Math.random()* 5 + 10 , i-10,-img.height , 0.1);
}else{clearInterval(timer);}
},100);
};
stage = new createjs.Stage(canvas);
var data = {
images: ["star.png"],
frames:{width:23,height:23,regX:0,regY:0},
}
sprite = new createjs.Sprite(new createjs.SpriteSheet(data));
createjs.Ticker.setFPS(20);
createjs.Ticker.addEventListener("tick" , tick);
function tick(e){
var t= stage.getNumChildren();
for(var i = t-1 ; i >0 ; i--){
var s = stage.getChildAt(i);
s.vY += 2;
s.vX += 1;
s.x += s.vX;
s.y += s.vY;
s.scaleX = s.scaleY = s.scaleX + s.vS;
s.alpha += s.vA;
if(s.alpha <= 0 || s.y > canvas.height){
stage.removeChildAt(i);
}
}
stage.update(e);
}
function addS(count , x , y , speed){
for(var i = 0 ; i < count ; i++){
var s = sprite.clone();
s.x = x;
s.y = y;
s.alpha = Math.random() * 0.5 + 0.5;
s.scaleX = s.scaleY = Math.random() + 0.3;
var a = Math.PI * 2 * Math.random();
var v = (Math.random() - 0.5) * 30 * speed ;
s.vX = Math.cos(a) * v;
s.vY = Math.sin(a) * v;
s.vS = (Math.random() - 0.5) * 0.2;
s.vA = -Math.random() * 0.05 - 0.01;
stage.addChild(s);
}
}</script>
</body>
</html>
代码的其中一张图片频闪，是什么问题。怎么解决？
想要的效果是：图片title.png在drawImage的同时伴有star.png的出现。。
html5
把不利于回答你问题的代码精简掉，会很快有人帮你解决的