Рисуем квадрат или прямоугольник используя HTML 5 canvas и JavaScript
<html> <head> <meta charset="utf-8"/> <title>Рисуем квадрат или прямоугольник используя HTML 5 canvas и JavaScript</title> </head> <body> <canvas id="myCanvas" width="455" height="350" style="border:1px solid #000000;">Эту запись вы увидите, если ваш браузер не поддерживает HTML5 canvas тег.</canvas> <script type="application/javascript"> var ctx = document.getElementById('myCanvas').getContext('2d'); ctx.fillStyle = "rgb(255,0,0)"; ctx.fillRect (0, 0, 50, 50); ctx.fillStyle = "rgba(200, 0, 200, 0.5)"; ctx.fillRect (30, 30, 50, 50); ctx.fillRect(125,125,100,100); ctx.clearRect(145,145,60,60); ctx.strokeRect(150,150,50,50); for (var i=0;i<6;i++){ for (var j=0;j<6;j++){ ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ',0)'; ctx.fillRect(300+j*25,195+i*25,25,25); } } </script> </body> </html>
Демо.
16 коментарів
Додати коментар Підписатись на коментаріВідписатись від коментарів