diff options
Diffstat (limited to 'web/learn_canvas')
| -rw-r--r-- | web/learn_canvas/basics/index.html | 39 |
1 files changed, 38 insertions, 1 deletions
diff --git a/web/learn_canvas/basics/index.html b/web/learn_canvas/basics/index.html index 3c0cfb8..e3d6e7f 100644 --- a/web/learn_canvas/basics/index.html +++ b/web/learn_canvas/basics/index.html @@ -3,9 +3,46 @@ <head> <meta charset="UTF-8"> <title>Title</title> + <style> + canvas { + border: 1px solid #ccc + } + </style> </head> <body> <canvas id="canvas"></canvas> + <script> + var can = document.getElementById("canvas"); + can.width = 800; + can.height = 600; + + var ctx = can.getContext("2d"); + + <!--ctx.beginPath();--> + ctx.rect(50, 50, 100, 100); + + <!--ctx.fillStyle = "#00cc00";--> + <!--ctx.fill();--> + + ctx.strokeStyle = "#cc0000"; + ctx.stroke(); + + ctx.beginPath(); + ctx.rect(200, 50, 100, 100); + ctx.strokeStyle = "#00cc00"; + ctx.stroke(); + + ctx.beginPath(); + ctx.moveTo(600, 100); + ctx.lineTo(650, 150); + ctx.lineTo(550, 150); + <!--ctx.lineTo(600, 100);--> + ctx.closePath(); + ctx.lineWidth = 10; + ctx.strokeStyle = '#0000cc'; + ctx.stroke(); + + </script> </body> -<script src="main.js"></script> +<!--<script src="main.js"></script>--> </html>
\ No newline at end of file |