مقالة مقدمة من wulin.com (www.vevb.com): html5-canvas المستطيلات tag-drawing.
<! doctype html>
<html>
<head>
<meta charset = 'utf-8'>
<title> html5-canvas tag-Draw Rectangle </title>
</head>
<body>
<canvas id = 1 عرض = 200 ارتفاع = 200> </canvas>
<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) ؛ // تمثل المعلمات المحور السيني ، المحور ص ، العرض ، والارتفاع على التوالي
content.linewidth = 4 ؛ // عرض الحدود
content.strokestyle = #fff ؛ // لون الحدود
content.strokerect (50،50،100،100) ؛ // إحداثيات وأحجام الحدود
content.fillStyle = #F00 ؛ // Rectangle Fill Color
content.fillrect (50،50،100،100) ؛ // إحداثيات وحجم المستطيل
}
</script>
</body>
</html>