Mam ten problem, w którym dodam linewidth do jednego obiektu na płótnie, a następnie wszystkie obiekty na płótnie w tym samym płótnie otrzymują tę samą linię. Na przykład:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.lineWidth = 10;
ctx.closePath();
ctx.stroke();
ctx.fillStyle="red";
ctx.fill();

ctx.beginPath();
ctx.arc(200, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle="blue";
ctx.fill();
ctx.stroke();
ctx.closePath();

</script>

</body>
</html>

Jak zrobić w Lingenidstwie dotyczą tylko jednego obiektu?

1
codingIsFun 13 sierpień 2014, 17:14

3 odpowiedzi

Najlepsza odpowiedź

Jest oparty na stanie. Musisz ponownie zresetować linewid do wartości, którą chcesz dla następnej ścieżki.

Live Demo

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.lineWidth = 10;
ctx.closePath();
ctx.stroke();
ctx.fillStyle="red";
ctx.fill();

ctx.lineWidth = 3; //this
ctx.beginPath();
ctx.arc(200, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle="blue";
ctx.fill();
ctx.stroke();
ctx.closePath();
0
Loktar 14 sierpień 2014, 18:58

Zmień linię linewidth:

var defaultLineWidth = ctx.lineWidth;
ctx.lineWidth = 10;

Następnie w drugiej akcji rysunku dodaj to:

ctx.lineWidth = defaultLineWidth;
1
Don Rhummy 13 sierpień 2014, 13:28

Starałbym się ustawić

ctx.lineWidth = 0;

Zanim ponownie wywołasz {x0}}.

0
branch14 13 sierpień 2014, 13:18