자바 스크립트를 사용하여 HTML 캔버스에 그림을 그려야합니다. 내 모양 중 하나가 올바른 색상으로 채워지지 않는 문제가 있습니다. 복잡한 상황이지만 단순화하기 위해 최선을 다할 것입니다.Javascript - fill()가 잘못된 색상으로 채우기 중입니다.
나를 슬프게하는 모양은 레이더 화면에서 비행기를 나타내는 것입니다. 다이아몬드 (나는 lineTo
명령을 사용하여 그립니다), 그 비행기에 대한 정보를 담고있는 직사각형, 그리고이 둘을 연결하는 선이 있습니다. 이 비행기는 속성이 selected
이며 기본적으로 false로 설정되어 있지만 다이아몬드 나 직사각형을 클릭하면 해당 비행기가 선택되고 selected
속성이 true로 설정됩니다.
평면이 이 아니고이 아닌 경우 빨간색 윤곽선으로 그려진 도형을 검정색 배경으로 채우기를 원합니다. 현재 작동 중입니다. 그러나 비행기 이으로 선택되면 다이아몬드가 빨간색으로 채워지 길 원합니다. 이 시나리오를 코딩했는데 평면을 클릭하여 선택하면 다이아몬드의 fill
색이 검은 색으로 유지되고 테두리가 커집니다.
왜 이런 일이 발생하는지 알 수 없습니다. 저는 그것이 마지막으로 모양을 그렸을 때부터 이월 된 캔버스의 이전 설정과 관련이 있다고 생각하지만, 매번이 값을 설정하므로 해결할 수 없습니다.
내가 여기 JSFiddle을 만들었습니다 JSFiddle을 여기에 같은 코드
//---------------------------- MARK: Declarations ----------------------------\\
var canvas = document.getElementById("gameCanvas");
//canvas.width = window.innerWidth;
//canvas.height = window.innerHeight;
canvas.width = 1280;
canvas.height = 627;
var ctx = canvas.getContext("2d");
var timer = 0;
var seconds = 0;
var textToDisplay = "";
var strLevel = "";
var intPlaneInfoBoxSelected = -1;
var intPlaneInfoBoxSelectedXOffset = 0;
var intPlaneInfoBoxSelectedYOffset = 0;
var border = new Border();
var intLessWidth = 0;
var intLessHeight = 0;
var aRunways = [];
var aWayPoints = [];
var aPlanes = [];
var aAircraftTypes = [];
var aAirlineName = [];
var colourBrightGreen = "#1EFF00";
var colourWaypointBorder = "#FFFFFF";
var colourWaypointBackground = "#188C08";
var intWaypointLineWidth = 5;
var intRunwayWaypointLineWidth = 4;
var intInfoBoxLineWidth = 3;
var intEntrySpeed = 0.1;
//---------------------------- MARK: Object Creation ----------------------------\\
function WayPoint() {
this.topLeft = new Point();
this.widthHeight = 15;
this.name = "";
this.inbound = false;
this.outbound = false;
this.border = "";
this.highlighted = false;
}
function Runway() {
this.topLeft = new Point();
this.height = 0;
this.width = 0;
this.highlighted = false;
this.name = "";
this.wayPointTopLeft = new Point();
this.wayPointWidthHeight = 0;
}
function Plane() {
this.flightNumber = "";
this.status = "";
this.selected = false;
this.airRoute = [];
this.heading = 0;
this.speed = 0;
this.topPoint = new Point();
this.widthHeight = 20;
this.trailing1TopLeft = new Point();
this.trailing2TopLeft = new Point();
this.trailing3TopLeft = new Point();
this.trailing4TopLeft = new Point();
this.infoBoxTopLeft = new Point();
this.infoBoxWidth = 60;
this.infoBoxHeight = 30;
this.dx = 3;
this.dy = 3;
}
function AircraftType() {
this.type = "";
this.minSpeed = 0;
}
function Point() {
this.x = 0;
this.y = 0;
}
function Border() {
this.topLeft = new Point();
this.width = 0;
this.height = 0;
this.borderTop = 0;
this.borderBottom = 0;
this.borderLeft = 0;
this.borderRight = 0;
this.lineThickness = 10;
this.lineColour = "#1EFF00";
}
//---------------------------- MARK: Event Listeners ----------------------------\\
document.addEventListener("click", mouseClickHandler, false);
document.addEventListener("mousedown", mouseDownHandler, false);
document.addEventListener("mouseup", mouseUpHandler, false);
document.addEventListener("mousemove", mouseMoveHandler, false);
function mouseClickHandler(e) {
// Get Mouse Position
var rectCanvas = canvas.getBoundingClientRect();
var positionX = e.clientX;
var positionY = e.clientY;
var booClickedOnWaypoint = false;
var booClickedOnRunway = false;
var booClickedOnPlane = false;
for (i = 0; i < aPlanes.length; i++) {
var intPlaneLeft = aPlanes[i].topPoint.x - (aPlanes[i].widthHeight/2);
var intPlaneRight = aPlanes[i].topPoint.x + (aPlanes[i].widthHeight/2);
var intPlaneTop = aPlanes[i].topPoint.y;
var intPlaneBottom = aPlanes[i].topPoint.y + aPlanes[i].widthHeight;
var intInfoBoxLeft = aPlanes[i].infoBoxTopLeft.x - (intInfoBoxLineWidth/2);
var intInfoBoxRight = aPlanes[i].infoBoxTopLeft.x + aPlanes[i].infoBoxWidth + (intInfoBoxLineWidth/2);
var intInfoBoxTop = aPlanes[i].infoBoxTopLeft.y - (intInfoBoxLineWidth/2);
var intInfoBoxBottom = aPlanes[i].infoBoxTopLeft.y + aPlanes[i].infoBoxHeight + (intInfoBoxLineWidth/2);
if (((positionX >= intPlaneLeft) && (positionX <= intPlaneRight) && (positionY >= intPlaneTop) && (positionY <= intPlaneBottom)) || ((positionX >= intInfoBoxLeft) && (positionX <= intInfoBoxRight) && (positionY >= intInfoBoxTop) && (positionY <= intInfoBoxBottom))) {
aPlanes[i].selected = true;
booClickedOnPlane = true;
} else {
aPlanes[i].selected = false;
}
}
}
function mouseDownHandler(e) {
var positionX = e.clientX;
var positionY = e.clientY;
for (i = 0; i < aPlanes.length; i++) {
var intInfoBoxLeft = aPlanes[i].infoBoxTopLeft.x - (intInfoBoxLineWidth/2);
var intInfoBoxRight = aPlanes[i].infoBoxTopLeft.x + aPlanes[i].infoBoxWidth + (intInfoBoxLineWidth/2);
var intInfoBoxTop = aPlanes[i].infoBoxTopLeft.y - (intInfoBoxLineWidth/2);
var intInfoBoxBottom = aPlanes[i].infoBoxTopLeft.y + aPlanes[i].infoBoxHeight + (intInfoBoxLineWidth/2);
if ((positionX >= intInfoBoxLeft) && (positionX <= intInfoBoxRight) && (positionY >= intInfoBoxTop) && (positionY <= intInfoBoxBottom)) {
intPlaneInfoBoxSelected = i;
intPlaneInfoBoxSelectedXOffset = positionX - aPlanes[i].infoBoxTopLeft.x;
intPlaneInfoBoxSelectedYOffset = positionY - aPlanes[i].infoBoxTopLeft.y;
}
}
}
function mouseUpHandler(e) {
intPlaneInfoBoxSelected = -1;
}
function mouseMoveHandler(e) {
var positionX = e.clientX;
var positionY = e.clientY;
if (intPlaneInfoBoxSelected > -1) {
aPlanes[intPlaneInfoBoxSelected].infoBoxTopLeft.x = positionX - intPlaneInfoBoxSelectedXOffset;
aPlanes[intPlaneInfoBoxSelected].infoBoxTopLeft.y = positionY - intPlaneInfoBoxSelectedYOffset;
}
}
//---------------------------- MARK: Setup ----------------------------\\
function SetupArrays() {}
function SetupLevel() {
if (strLevel == "YSSY") {
//Waypoints
addWaypoint("LEFT", {
x: border.borderLeft,
y: 100
}, true, false);
}
}
function SetupCanvas() {
strLevel = "YSSY";
}
function LoadAircraftTypes() {
}
function LoadAirlineNames() {}
//---------------------------- MARK: Draw Existing Things ----------------------------\\
function drawPlanes() {
for (i = 0; i < aPlanes.length; i++) {
// Line
ctx.lineWidth = 4;
ctx.fillStyle = 'red';
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo((aPlanes[i].topPoint.x), (aPlanes[i].topPoint.y + (aPlanes[i].widthHeight/2)));
ctx.lineTo((aPlanes[i].infoBoxTopLeft.x + (aPlanes[i].infoBoxWidth/2)), (aPlanes[i].infoBoxTopLeft.y + (aPlanes[i].infoBoxHeight/2)));
ctx.stroke();
// Plane
ctx.fillStyle = 'red';
ctx.strokeStyle = 'red';
if (aPlanes[i].selected == true) {
var pointX = aPlanes[i].topPoint.x;
var pointY = aPlanes[i].topPoint.y;
var width = aPlanes[i].widthHeight;
ctx.beginPath();
ctx.moveTo(pointX, pointY);
ctx.lineTo(pointX + (width/2), pointY + (width/2));
ctx.lineTo(pointX, pointY + width);
ctx.lineTo(pointX - (width/2), pointY + (width/2));
ctx.closePath();
ctx.fill();
} else {
var lineThickness = 3;
var pointX = aPlanes[i].topPoint.x;
var pointY = aPlanes[i].topPoint.y + lineThickness;
var width = aPlanes[i].widthHeight - (lineThickness * 2);
ctx.beginPath();
ctx.lineWidth = lineThickness;
ctx.moveTo(pointX, pointY);
ctx.lineTo(pointX + (width/2), pointY + (width/2));
ctx.lineTo(pointX, pointY + width);
ctx.lineTo(pointX - (width/2), pointY + (width/2));
ctx.closePath();
ctx.stroke();
}
// Flight Information Box
ctx.rect(aPlanes[i].infoBoxTopLeft.x, aPlanes[i].infoBoxTopLeft.y, aPlanes[i].infoBoxWidth, aPlanes[i].infoBoxHeight);
ctx.strokeStyle = 'red';
ctx.fillStyle = 'black';
ctx.lineWidth = clone(intInfoBoxLineWidth);
ctx.fill();
ctx.stroke();
}
}
function drawRunways() {
}
function drawText() {
}
function DrawWaypoints() {
}
function DrawCanvas() {
}
//---------------------------- MARK: Create Motion ----------------------------\\
function movePlanes() {
//TODO
if (aPlanes.length > 0) {
for (i = 0; i < aPlanes.length; i++) {
aPlanes[i].topPoint.x += aPlanes[i].dx;
aPlanes[i].infoBoxTopLeft.x += aPlanes[i].dx;
aPlanes[i].topPoint.y += aPlanes[i].dy;
aPlanes[i].infoBoxTopLeft.y += aPlanes[i].dy;
}
}
}
//---------------------------- MARK: Collision Detection ----------------------------\\
function detectLanded() {
}
//---------------------------- MARK: Create New Things ----------------------------\\
function addPlane() {
var tempPlane = new Plane();
var astrInboundOutbound = ["Inbound", "Outbound"];
var strRouteDirection = astrInboundOutbound[random(astrInboundOutbound.length)];
strRouteDirection = "Inbound";
if (strRouteDirection == "Inbound") {
// Start at an inbound waypoint
var astrInboundWaypoints = [];
for (var i = 0; i < aWayPoints.length; i++) {
if (aWayPoints[i].inbound == true) {
astrInboundWaypoints.push(aWayPoints[i]);
}
};
var intArrayPosition = random(astrInboundWaypoints.length);
var selectedWaypoint = astrInboundWaypoints[intArrayPosition];
tempPlane.topPoint = clone(selectedWaypoint.topLeft);
tempPlane.topPoint.x += (selectedWaypoint.widthHeight/2);
tempPlane.topPoint.y += ((selectedWaypoint.widthHeight - tempPlane.widthHeight)/2);
switch (selectedWaypoint.border) {
case "Left":
tempPlane.dx = intEntrySpeed;
tempPlane.dy = 0;
break;
case "Right":
tempPlane.dx = -1 * intEntrySpeed;
tempPlane.dy = 0;
break;
case "Top":
tempPlane.dx = 0;
tempPlane.dy = intEntrySpeed;
break;
case "Bottom":
tempPlane.dx = 0;
tempPlane.dy = -1 * intEntrySpeed;
break;
}
} else {
// Start at the upwind end of a runway
// TODO
}
tempPlane.infoBoxTopLeft = {
x: (tempPlane.topPoint.x - (tempPlane.infoBoxWidth/2)),
y: (tempPlane.topPoint.y - tempPlane.infoBoxHeight - 20)
};
aPlanes.push(tempPlane);
}
function addRunway(name, topLeft, width, height) {
}
function addWaypoint(name, topLeft, inbound, outbound) {
var tempWaypoint = new WayPoint();
tempWaypoint.name = name;
tempWaypoint.topLeft = topLeft;
tempWaypoint.inbound = inbound;
tempWaypoint.outbound = outbound;
if (tempWaypoint.topLeft.x == border.borderLeft) {
tempWaypoint.border = "Left";
tempWaypoint.topLeft.x = border.borderLeft - (tempWaypoint.widthHeight/2);
}
if (tempWaypoint.topLeft.y == border.borderTop) {
tempWaypoint.border = "Top";
tempWaypoint.topLeft.y = border.borderTop - (tempWaypoint.widthHeight/2);
}
if (tempWaypoint.topLeft.x == border.borderRight) {
tempWaypoint.border = "Right";
tempWaypoint.topLeft.x = border.borderRight - (tempWaypoint.widthHeight/2);
}
if (tempWaypoint.topLeft.y == border.borderBottom) {
tempWaypoint.border = "Bottom";
tempWaypoint.topLeft.y = border.borderBottom - (tempWaypoint.widthHeight/2);
}
if (tempWaypoint.border != "") {
// Plus half the line width one all sides
tempWaypoint.topLeft.x -= (intWaypointLineWidth/2);
tempWaypoint.topLeft.y -= (intWaypointLineWidth/2);
tempWaypoint.widthHeight += intWaypointLineWidth;
}
aWayPoints.push(tempWaypoint);
}
//---------------------------- MARK: Timer ----------------------------\\
function timerTick() {
timer += 1;
if (timer % 1000 == 0) {
seconds++;
}
if (timer == 1) {
SetupArrays();
SetupCanvas();
SetupLevel();
}
if (timer == 300) {
addPlane();
}
/*if(timer==5){
\t document.location.reload();
\t \t }*/
}
//---------------------------- MARK: Supplimentary Routines ----------------------------\\
function random(intNumber) {
return Math.floor((Math.random() * intNumber));
}
function getTextWidth(text, font) {
ctx.font = font;
var metrics = ctx.measureText(text);
return metrics.width;
}
function getTextHeight(text, font) {
ctx.font = font;
var metrics = ctx.measureText(text);
return metrics.height;
}
function clone(obj) {
// Handle the 3 simple types, and null or undefined
if (null == obj || "object" != typeof obj) return obj;
// Handle Date
if (obj instanceof Date) {
var copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
// Handle Array
if (obj instanceof Array) {
var copy = [];
for (var i = 0, len = obj.length; i < len; i++) {
copy[i] = clone(obj[i]);
}
return copy;
}
// Handle Object
if (obj instanceof Object) {
var copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
}
return copy;
}
throw new Error("Unable to copy obj! Its type isn't supported.");
}
//---------------------------- MARK: DRAW ----------------------------\\
function draw() {
// All movement and display
// Call functions to make things happen, listeners will work on their own, no need to call
ctx.clearRect(0, 0, canvas.width, canvas.height);
movePlanes();
drawPlanes();
requestAnimationFrame(draw);
}
//---------------------------- MARK: Other ----------------------------\\
setInterval(timerTick, 1);
draw();
//---------------------------- END OF SCRIPT ----------------------------\\
<canvas id="gameCanvas"></canvas>
drawPlanes()
라고 비행기를 그리는 기능을하고, 나는 다스에 넣어거나 그래서 빈 줄이 나타나면 스크롤 할 때 빨리 접근 할 수 있습니다.
코드를 실행하면 평면 모양이 왼쪽에서 오른쪽으로 '날기'시작하고 선택되지 않은 상태임을 알 수 있습니다. 그러나 그것을 선택하기 위해 그것을 클릭하면 그것을 채우지 않아야합니다, 그냥 모양 크기를 확대하고 테두리를 밖으로 이동합니다.
아무도 도와 줄 수 있습니까?