Question

我无法为我的游戏组件添加线性渐变框。我希望组件的方式是： new component(width, height, color, x, y, type); 有什么需要补充的吗？那么添加渐变是可能的吗？我尝试了但是之后它就摆脱了画布......

以下是完整代码：

<!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 gradient;和new component或类似的东西......

Answer 1

对于线性渐变，您需要至少2种颜色，一种用于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' }]

您可能还想允许指定线性渐变的角度。

一旦传入数据，应用渐变变得相当简单。

我不打算将其用于您的所有代码，但这里是update()函数在component内部的样子。

const canvas = document.querySelector('canvas');
canvas.width = 400;
canvas.height = 300;
const ctx = canvas.getContext('2d');

function component(x, y, width, height, color) {
  this.update = () => {
    const angle = Math.PI * color.angle / 180;
    const gradient = ctx.createLinearGradient(
      // Do a little trigonometry to rotate the gradient rectangle around the center of the filled rectangle
      x + (width / 2 - Math.cos(angle) * Math.max(width, height) * 0.5),
      y + (height / 2 - Math.sin(angle) * Math.max(width, height) * 0.5),
      x + (width / 2 + Math.cos(angle) * Math.max(width, height) * 0.5),
      y + (height / 2 + Math.sin(angle) * Math.max(width, height) * 0.5)
    );
    
    color.stops.forEach(({ color, position }) => gradient.addColorStop(position, color));
    ctx.fillStyle = gradient;
    ctx.fillRect(x, y, width, height);
  };
};

/*
 In this example, `color` is specified by an object with an angle (in degrees, 0 being left-to-right, 
 rotating counter-clockwise and with an array of color stops, 
 with position specified as a decimal percent (0 = 0%, 1 = 100%)
 */
const color = {
  angle: 45,
  stops: [
    { color: '#F00', position: 0 },
    { color: '#0F0', position: .5 },
    { color: '#00F', position: 1 }
  ]
};

(new component(100, 100, 200, 100, color)).update();

canvas {
  border: 1px solid #000;
}

<canvas></canvas>

对渐变应用角度的数学运算需要一点触发，但其余部分非常直接：您只需使用ctx.createLinearGradient()创建新渐变，添加一个或多个色标，然后将其用作fillStyle上的fillRect()。

有多种方法可以做到这一点，但这通常是基本技巧。

向现有组件添加渐变

1 个答案: