До прикладів
Cайт гуртка WEB-MIDITAUR
Блог проекту Practice.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML елемент Canvas</title> <style>body{font-family:Verdana;}</style> </head> <body> <h1>HTML елемент Canvas</h1> <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">Ваш браузер не підтримує HTML canvas тег.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //Зелене зафарбоване коло ctx.fillStyle = "#00A308"; //Зелене ctx.beginPath(); ctx.arc(220, 220, 50, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); //Червоне зафарбоване коло ctx.fillStyle = "#FF1C0A"; //Червоне ctx.beginPath(); ctx.arc(100, 100, 100, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); //Прямокутник напівпрозорий ctx.fillStyle = "rgba(255, 255, 0, .5)" ctx.beginPath(); ctx.rect(15, 150, 120, 120); ctx.closePath(); ctx.fill(); </script> </body> </html>
