บทความบทนำของ wulin.com (www.vevb.com): html5-canvas แท็กวาดรูปสี่เหลี่ยม
<! doctype html>
<html>
<head>
<meta charset = 'utf-8'>
<title> แท็ก HTML5-CANVAS-รูปสี่เหลี่ยมผืนผ้าดึง </title>
</head>
<body>
<canvas id = 1 width = 200 ความสูง = 200> </sanvas>
<script type = text/javascript>
window.onload = function () {
var canva = document.getElementById ('1')
var content = canva.getContext ('2d')
content.fillstyle = #ccc; // เติมสีพื้นหลังของผ้าใบ
content.fillrect (0, 0, 200, 200); // พารามิเตอร์แสดงถึงแกน x, แกน y, ความกว้างและความสูงตามลำดับตามลำดับ
content.lineWidth = 4; // ความกว้างของเส้นขอบ
content.strokestyle = #FFF; // สีชายแดน
Content.strokerect (50,50,100,100); // พิกัดชายแดนและขนาด
content.fillstyle = #f00; // สี่เหลี่ยมเติมสี
content.fillrect (50,50,100,100); // พิกัดสี่เหลี่ยมผืนผ้าและขนาด
-
</script>
</body>
</html>