个人中心
gpt4 book ai didi

javascript - 向现有组件添加渐变

转载 作者：行者123 更新时间：2023-12-03 02:08:37 25 4
gpt4 key购买 nike

我无法将线性渐变框添加到我的游戏的组件中。我希望组件的方式是:新组件(宽度、高度、颜色、x、y、类型)；有什么我需要补充的吗？那么添加渐变是可能的吗？我尝试过，但之后它就摆脱了 Canvas ......

完整代码如下:

<!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>

如何添加渐变？？？使用 vargradient; 和一个新组件或类似的东西......

最佳答案

对于线性渐变，您至少需要 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' }]

您可能还希望允许指定线性渐变的 Angular 。

传入数据后，应用渐变就变得相当简单。

我不会将其应用到您的所有代码中，但这里是您的 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>

将 Angular 应用于渐变的数学需要一点三 Angular 函数，但其​​余部分非常简单:您只需使用 ctx.createLinearGradient() 来创建一个新渐变，添加一个或更多颜色停止点，然后将其用作 fillRect() 上的 fillStyle。

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

关于javascript - 向现有组件添加渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49681275/

25 4 0
文章推荐： javascript - 想要在 Angular 4 中单击按钮时获取特定用户的详细信息
文章推荐： javascript - 使用 Jest 监视启动的模块
文章推荐： javascript - React - 使用一个功能处理多个切换按钮(输入类型单选按钮)
文章推荐： javascript - 显示更多按钮，点击后隐藏
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com