<html> <body> <canvas id="canvas1" width="300" height="200"></canvas> <script type="text/javascript"> // get canvas var canvas = document.getElementById("canvas1"); var context = canvas.getContext("2d"); // fill rectagle context.fillRect(0,0,150,100); // fill text context.fillText("Hello, Canvas!", 155, 110); // draw a line context.beginPath(); context.moveTo(0, 100); context.lineTo(300, 100); context.moveTo(150, 0); context.lineTo(150, 200); context.rect(0, 0, 300, 200); context.stroke(); context.closePath(); </script> </body> </html> |
The result such like below,
Reference: http://www.books.com.tw/exep/prod/booksfile.php?item=0010480450
沒有留言:
張貼留言