Robię pierwsze próby z HTML5 i Canvas. Na początek chciałbym uzyskać taki efekt, że jest suwak i płótno, jak się zmienia wartość suwaka, to zmienia się położenie odcinka na płótnie.
Jak widać, rysowanie jest zrobione dokładnie tak, jak tutaj:
http://www.w3schools.com/graphics/canvas_drawing.asp
http://www.w3schools.com/graphics/canvas_coordinates.asp
Problem jest taki, ze jak odkomentuję rysowanie okręgu, to działa tak, jak chciałem, a jak zakomentuję rysowanie okręgu (tak, jak teraz jest w przedstawionym kodzie), to żółty prostokąt nie zamalowuje odcinka i pojawiają się wszystkie namalowane odcinki. Co jest tego przyczyną i gdzie popełniłem błąd? Robiłem takie rzeczy w C++ i w Javie na bitmapie i nigdy się nie spotkałem z tym, żeby prostokąt nie zamalował poprzedniego rysunku.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled</title>
</head>
<body>
<script type="text/javascript">
function f()
{
var ctx = document.getElementById("Bmp").getContext("2d");
var Val = document.getElementById("Rng").value;
// Zamalowanie poprzedniego rysunku
ctx.fillStyle = "#FFFF00";
ctx.fillRect(0,0,640,480);
// Namalowanie linii
ctx.moveTo(0,0);
ctx.lineTo(200,Val);
ctx.stroke();
// Namalowanie okregu
//ctx.beginPath();
//ctx.arc(Val * 2,50,40,0,2*Math.PI);
//ctx.stroke();
// Wyswietlenie wartosci suwaka
document.getElementById("RngL").innerHTML = Val;
}
</script>
<form name="MainForm">
<canvas id="Bmp" width="640" height="480"></canvas>
<input id="Rng" type="range" min="0" max="300" oninput="f()" />
<span id="RngL">0</span>
</form>
</body>
</html>
Testowałem na Firefox 48.0.2
Inny przykład, jeszcze prostszy, na którym też widać problem
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="500"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Pierwsza linia
ctx.moveTo(10,0);
ctx.lineTo(200,100);
ctx.stroke();
// Pełny prostokat, ktory czesciowo zamalowuje linie
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,100,40);
// Druga linia, jej namalowanie powoduje odmalowanie pierwszej linii na tle prostokata, co nie jest pozadane w moim przypadku
ctx.moveTo(50,100);
ctx.lineTo(200,120);
ctx.stroke();
</script>
</body>
</html>