Pregled code-a:
<!DOCTYPE HTML> <html lang="hr"> <head> <meta charset="UTF-8"> <title>CANVAS - Pattern</title> <script> var can, ctx; function init() { can = document.getElementById('kan1'); if (can.getContext) { ctx = can.getContext('2d'); //draw pattern getImg(); img.addEventListener("load", function() { rectPtrn(img); }); } else document.getElementById('kan11').innerHTML='Vaš browser ne podržava CANVAS tag!'; } function getImg() { img = new Image(); img.src = '../slike/pattern.jpg'; return img; } function rectPtrn(img) { var ptrn=ctx.createPattern(img,'repeat'); ctx.fillStyle = ptrn; ctx.fillRect(2,2, 296,196); } window.onload=init; </script> </head> <body> Uzorak (pattern) kao pozadina pravokutnika pomoću metode <b>createPattern(img, 'repeat')</b>.<br> <canvas id="kan1" width="300" height="200" style="border:1px solid #DDDDDD;"> <span id="kan11">Vaš browser ne podržava CANVAS element!</span> </canvas> <br><br> </body> </html>
Pregled stranice:
Pogledaj stranicu
../html/html5canvas/primjeri/44pattern.html
.