极客观点
项目管理
HarmonyOS
问题描述
有一个需求是把这个星空特效背景加一张图片。但是drawImage方法不能像backgroud那样设置图片的位置。思路就只剩下把星空背景改为透明的。但是这个背景我设置为其他颜色都是好好的，一旦设置为透明的就坏了。哪里的原因，怎么办，求解答。
问题出现的环境背景及自己尝试过哪些方法
canvas
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>星空屏保</title>
<style>
html,
body {
height: 100%;
max-width: 100%;
margin: 0;
overflow: hidden;
font-family: sans-serif
}
#space {
width: 100%
}
</style>
</head>
<body>
<canvas id="space"></canvas>
<a href="#" id="warp"></a>
<script>
//based on an Example by @curran
window.requestAnimFrame = (function() {
return window.requestAnimationFrame
})();
var canvas = document.getElementById("space");
var c = canvas.getContext("2d");
var numStars = 1900;
var radius = '0.' + Math.floor(Math.random() * 9) + 1;
var focalLength = canvas.width * 2;
var warp = 0;
var centerX, centerY;
var stars = [],
star;
var i;
var animate = true;
initializeStars();
function executeFrame() {
if(animate)
requestAnimFrame(executeFrame);
moveStars();
drawStars();
}
function initializeStars() {
centerX = canvas.width / 2;
centerY = canvas.height / 2;
stars = [];
for(i = 0; i < numStars; i++) {
star = {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
z: Math.random() * canvas.width,
o: '0.' + Math.floor(Math.random() * 99) + 1
};
stars.push(star);
}
}
function moveStars() {
for(i = 0; i < numStars; i++) {
star = stars[i];
star.z--;
if(star.z <= 0) {
star.z = canvas.width;
}
}
}
function drawStars() {
var pixelX, pixelY, pixelRadius;
// Resize to the screen
if(canvas.width != window.innerWidth || canvas.width != window.innerWidth) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
initializeStars();
}
if(warp == 0) {
c.fillStyle = "#fff"; //这里一旦改成下面透明的，效果就会出问题，其他颜色则无碍
// c.fillStyle="rgba(255,255,255,0)"
c.fillRect(0, 0, canvas.width, canvas.height);
}
c.fillStyle = "rgba(0, 0, 0, " + radius + ")";
for(i = 0; i < numStars; i++) {
star = stars[i];
pixelX = (star.x - centerX) * (focalLength / star.z);
pixelX += centerX;
pixelY = (star.y - centerY) * (focalLength / star.z);
pixelY += centerY;
pixelRadius = 1 * (focalLength / star.z);
c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);
c.fillStyle = "rgba(0, 0, 0, " + star.o + ")";
//c.fill();
}
}
executeFrame();
</script>
</body>
</html>
你期待的结果是什么？实际看到的错误信息又是什么？
希望可以改成透明的背景让我放张背景图片，
html5
在
drawStars函数里面的if (wap == 0)之前添加下面一行代码：canvas在画之前是不会清除已经存在在画布上的内容的，如果没有手动清除，canvas只会在原先的画布上接着画。当设置的颜色不透明的时候，因为把
canvas画布整个图上了一层不透明的颜色，所以画布上原先的东西被盖在下面了，所以看不见，但并不是清除了，所以当设置一个不透明的颜色的时候，原先的内容就显示出来了，也就是所有移动位置上的星星都会显示出来，所以效果就是拉长的线。