时间戳

首页 > 解决方案 > 函数绘制混合属性

javascript - 函数绘制混合属性

问题描述

我正在尝试创建一个 2d 平台游戏，代码是它的基础。

由于某些未知原因，我的最终函数 draw 混合了其他函数的属性（尤其是颜色和线宽等）。

如果有类型原因（“this.”功能不合适等）

我想知道进一步的项目。

任何好的答案将不胜感激！

/* main.js */

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")

function Shooter() {
    this.x = 100;
    this.y = 500;
    this.size = 50;
    this.color = "blue";
    this.borderColor = "black";
    this.borderWidth = 5;
    this.draw = function() {
        ctx.fillRect(this.x, this.y, this.size, this.size);
        ctx.strokeRect(this.x, this.y, this.size, this.size);
        ctx.fillStyle = this.color;
        ctx.strokeStyle = this.borderColor;
        ctx.lineWidth = this.borderWidth;
    }
}

function Gun() {
    this.x = sh.x + sh.size / 2 + 10;
    this.y = sh.y + sh.size / 2;
    this.color = "grey";
    this.borderColor = "brown";
    this.borderWidth = 1;
    this.width = 20;
    this.height = 10;
    this.draw = function() {
        ctx.fillRect(this.x,this.y,this.width,this.height);
        ctx.strokeRect(this.x,this.y,this.width,this.height);
        ctx.fillStyle = this.color;
        ctx.strokeStyle = this.borderColor;
        ctx.lineWidth = this.borderWidth;
    }
}

function Bullet() {
    this.x = sh.x + sh.size * 2;
    this.y = sh.y + sh.size / 2;
    this.color = "orange";
    this.radius = 5;
    this.vx = 20;
    this.borderColor = "green";
    this.borderWidth = 2;
    this.draw = function() {
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        ctx.fillStyle = this.color;
        ctx.strokeStyle = this.borderColor;
        ctx.lineWidth = this.borderWidth;
        ctx.stroke();
    }
}
var sh = new Shooter();
var g = new Gun();
var b = new Bullet();

function draw() {
  
    sh.draw();

    g.draw();
    
    b.draw();
    
requestAnimationFrame(draw);
}

draw();
/* main.css */

html, body {
    overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="main.css" />
   
</head>
<body>
    <canvas id="canvas" width="1536px" height="754px"></canvas>
    <!-- device innerWidth and innerHeight -->
<!-- make fullScreen to see the issue -->       
    
    <script src="main.js"></script>
</body>
</html>

标签： javascriptcsshtmlhtml5-canvas

解决方案

问题是您首先绘制形状，然后设置填充和描边。这样做可以为下一个形状设置填充和描边。

在我使用的代码中，ctx.translate(0,-400)因为否则画布会太大。设置画布大小时删除此行。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//setting the canvas size
canvas.width = 400;
canvas.height = 200;

ctx.translate(0,-400);

function Shooter() {
    this.x = 100;
    this.y = 500;
    this.size = 50;
    this.color = "blue";
    this.borderColor = "black";
    this.borderWidth = 5;
    this.draw = function() {
    // first set the colors for this shape
    ctx.fillStyle = this.color;
    ctx.strokeStyle = this.borderColor;
    ctx.lineWidth = this.borderWidth;
    // then fill and stroke the shape  
    ctx.fillRect(this.x, this.y, this.size, this.size);
    ctx.strokeRect(this.x, this.y, this.size, this.size);
    }
}

function Gun() {
    this.x = sh.x + sh.size / 2 + 10;
    this.y = sh.y + sh.size / 2;
    this.color = "grey";
    this.borderColor = "brown";
    this.borderWidth = 1;
    this.width = 20;
    this.height = 10;
    this.draw = function() {
    ctx.fillStyle = this.color;
    ctx.strokeStyle = this.borderColor;
    ctx.lineWidth = this.borderWidth;
    ctx.fillRect(this.x,this.y,this.width,this.height);     ctx.strokeRect(this.x,this.y,this.width,this.height);

    }
}

function Bullet() {
    this.x = sh.x + sh.size * 2;
    this.y = sh.y + sh.size / 2;
    this.color = "orange";
    this.radius = 5;
    this.vx = 20;
    this.borderColor = "green";
    this.borderWidth = 2;
    this.draw = function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        ctx.fillStyle = this.color;
        ctx.strokeStyle = this.borderColor;
        ctx.lineWidth = this.borderWidth;
        ctx.fill();
        ctx.stroke();
      
    }
}
var sh = new Shooter();
var g = new Gun();
var b = new Bullet();

function draw() {
  
    sh.draw();

    g.draw();
    
    b.draw();
    
requestAnimationFrame(draw);
}

draw();
canvas{border:1px solid}
<canvas id="canvas"></canvas>

推荐阅读