Javascript 向现有组件添加渐变
我不能为我的游戏向组件添加线性渐变框。我希望组件采用的方式是： 新组件宽度、高度、颜色、x、y、类型； 有什么我需要补充的吗？ 所以增加梯度是可能的？ 我试过了，但那之后就没了画布 以下是完整的代码：Javascript 向现有组件添加渐变,javascript,Javascript,我不能为我的游戏向组件添加线性渐变框。我希望组件采用的方式是： 新组件宽度、高度、颜色、x、y、类型； 有什么我需要补充的吗？ 所以增加梯度是可能的？ 我试过了，但那之后就没了画布 以下是完整的代码： <!DOCTYPE html> <html> <head> <style> canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; } </style> </hea
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var initialized = false;
var myGamePiece;
var myObstacle;
function startGame() {
myGamePiece = new component(40, 40, "#00ff00ff", 50, 140);
myObstacle = new component(80, 37, "#cf0000ff", 240, 0);
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 560;
this.canvas.height = 320;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
if (!initialized) {
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function (e) {
myGameArea.key = false;
})
initialized = true;
}
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
ctx.fillStyle="red";
ctx.font="80px Georgia";
ctx.fillText("You died",125,120);
initialized = false;
}
}
function component(width, height, color, x, y, type) {
this.type = type
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGamePiece.update();
myGameArea.clear();
myObstacle.update();
myGamePiece.x += myGamePiece.speedX;
myGamePiece.y += myGamePiece.speedY;
}
//myGamePicec.update();myGamePiecemyGameArea.start();
if (myGameArea.key && myGameArea.key == 37||myGameArea.key && myGameArea.key == 65) {myGamePiece.speedX = -3; } else if (myGameArea.key && myGameArea.key == 39||myGameArea.key && myGameArea.key == 68) {myGamePiece.speedX = 3; } else if (myGameArea.key && myGameArea.key == 38||myGameArea.key && myGameArea.key == 87) {myGamePiece.speedY = -3; } else if (myGameArea.key && myGameArea.key == 40||myGameArea.key && myGameArea.key == 83) {myGamePiece.speedY = 3; } else {myGamePiece.speedX = 0; myGamePiece.speedY = 0;}
myGamePiece.update();
}
</script>
</body>
</html>
如何添加梯度到这个？？？利用var梯度；还有一个新的组件或类似的东西…对于线性渐变，至少需要两种颜色，一种是0%，一种是100%，才能在它们之间过渡 因为您只提供了一个，所以您需要一种方法来提供另一个来在两者之间进行渐变。可以通过添加另一个参数，或允许函数接受指定颜色和/或位置的数组、数组或对象数组来完成此操作：
// some possible ways to define the gradients
['#000', '#FFF'] // even gradient between black and white
[['#000', 0], ['#FFF', 100]] // gradient between black at 0% and white at 100%
[{ color: '#000', position: '0' }, { color: '#FFF', position: '100' }]
这是很多无关紧要的代码。试着做一个例子。@samanime做了。你能提前回答吗？@samanime做了。太复杂了。不过它很有创意。在新组件100、100、200、100中，color.update；100、100、200、100代表什么？它们是所创建矩形的x、y、宽度和高度。至于太复杂，如果你不需要的话，你可以放弃旋转位，但这是用画布指定渐变的唯一方法。在我的平台上不起作用。不管怎么说，投票结果还是被接受了，因为它在其他方面起作用。