Ich habe folgende Funktion, die eine "Schlange" aus Kreisen und Rechtecken zeichnen soll:
Mit 'setLineDash()' möchte ich eine gestrichelte Linie zeichnen, die sich durch die Mitte der Schlange zieht. Das funktioniert mehr oder weniger. Das Problem ist, dass diese Linie zum Teil auch um die Kreise geht (siehe Bild, grüner Kreis).
Woran kann das liegen?
Code:
function paint() { // Snake zeichnen for (i = this.snakeElements.length-1; i >= 0; i--) { // Kreis zeichnen this.context.fillStyle = 'red'; this.context.beginPath(); this.context.arc(this.snakeElements[i].x+(this.snakeElementWidth/2), this.snakeElements[i].y+(this.snakeElementHeight/2), this.snakeElementWidth/2, 0, 2*Math.PI); this.context.fill(); if (i === 0 || i === this.snakeElements.length-1) { switch (this.snakeElements[i].direction) { case 'R': this.snakeElements[i].x += this.speed; break; case 'L': this.snakeElements[i].x -= this.speed; break; case 'U': this.snakeElements[i].y -= this.speed; break; case 'D': this.snakeElements[i].y += this.speed; break; } } var h = 0; var w = 0; var supx = 0; var supy = 0; // Rechteck zeichnen, wenn nicht Kopf if (i < this.snakeElements.length-1) { if (this.snakeElements[i+1].direction === 'R' || this.snakeElements[i+1].direction === 'L') { h = 35; w = this.snakeElements[i+1].x - this.snakeElements[i].x; supx = 17; } else { w = 35; h = this.snakeElements[i+1].y - this.snakeElements[i].y; supy = 17; } this.context.fillStyle = 'red'; this.context.fillRect(this.snakeElements[i].x+supx, this.snakeElements[i].y+supy, w, h); this.context.save(); // Linie zeichnen this.context.setLineDash([6,6]); this.context.filter = 'blur(1px)'; if (supx > 0) { this.context.moveTo(this.snakeElements[i].x+17, this.snakeElements[i].y+17); this.context.lineTo(this.snakeElements[i+1].x+17, this.snakeElements[i].y+17); } else { this.context.moveTo(this.snakeElements[i].x+17, this.snakeElements[i].y+17); this.context.lineTo(this.snakeElements[i].x+17, this.snakeElements[i+1].y+17); } this.context.stroke(); this.context.restore(); if (i === this.snakeElements.length-2 && i > 0 && (w === 0 || h === 0)) { this.snakeElements.splice(this.snakeElements.length-1, 1); } } // Schablone mit Augen über Kopfelement legen if (i === 0) { var img = new Image(); switch(this.direction) { case 'R': img.src = '../pictures/eyes_right.png'; break; case 'L': img.src = '../pictures/eyes_left.png'; break; case 'U': img.src = '../pictures/eyes_up.png'; break; case 'D': img.src = '../pictures/eyes_down.png'; break; } this.context.drawImage(img, this.snakeElements[i].x, this.snakeElements[i].y, this.snakeElementWidth, this.snakeElementHeight); } } // Kollisionserkennung this.checkCollision(); }
Woran kann das liegen?
Kommentar