Pregled code-a:
<!DOCTYPE HTML> <html lang="hr"> <head> <meta charset="UTF-8"> <title>CANVAS - fill, stroke, clear, Rect</title> <script> function crtaj() { var can = document.getElementById("kan1"); if (can.getContext){ var ctx = can.getContext("2d"); //1. pravokutnik ctx.strokeStyle='green'; ctx.lineWidth=2; ctx.fillStyle='#FFCCFF'; ctx.strokeRect(10,10, 200,100); ctx.fillRect(10,10, 200,100); //2. pravokutnik ctx.strokeStyle='red'; ctx.lineWidth=2; ctx.fillStyle='yellow'; ctx.strokeRect(200,100, 50,50); ctx.fillRect(200,100, 50,50); //clear rect - brisanje pravokutne povrsine ctx.clearRect(150,50, 75,55); } } window.onload=crtaj; </script> </head> <body> Kompleksan primjer sa sve tri metode <b>fillRect()</b> , <b>strokeRect()</b> i <b>clearRect()</b>. <br> <canvas id="kan1" width="300" height="200" style="border:1px solid #DDDDDD;"> Vaš browser ne podržava CANVAS element! </canvas> <br><br> </body> </html>
Pregled stranice:
Pogledaj stranicu
../html/html5canvas/primjeri/22fill_stroke_clear_rect.html
.