#1 - APPLICAZIONE IN JAVA SCRIPT
Codice:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Drawing</title>
</head>
<body>
<p>Michela Veggente</p>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
<script>
document.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById("myCanvas");
var contesto = canvas.getContext("2d");
function draw() {
contesto.clearRect(0, 0, canvas.width, canvas.height);
contesto.strokeStyle = "blue";
contesto.lineWidth = 5; //spessore
contesto.strokeRect(10 , 10, 200, 100);
contesto.strokeStyle = "yellow";
contesto.beginPath();
contesto.moveTo(50, 10);
contesto.lineTo(300, 300);
contesto.stroke();
contesto.strokeStyle = "red";
contesto.beginPath();
contesto.ellipse(210, 210, 100, 100, 0, 0, 2 * Math.PI);
contesto.stroke();
}
draw();
});
</script>
</body>
</html>
Output:
