HTML5畫桌子代碼
HTML5是一個(gè)非常強(qiáng)大的標(biāo)記語言，可以用來創(chuàng)建美麗的網(wǎng)頁效果，包括畫桌子等功能。下面是HTML5畫桌子的代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5畫桌子代碼</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="brown";
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50,350);
ctx.lineTo(350,350);
ctx.lineTo(350,50);
ctx.closePath();
ctx.fill();
ctx.fillStyle="white";
for(var i=90;i<350;i+=80){
ctx.fillRect(i,80,40,240);
}
</script>
</body>
</html>如上代碼是用HTML5標(biāo)記語言創(chuàng)建的畫桌子代碼，其中canvas標(biāo)簽定義了畫布元素，id屬性指定canvas元素的ID，width屬性指定畫布的寬度，height屬性指定畫布的高度。
JS部分的代碼則使用canvas.getContext方法獲取2d繪圖上下文對象，fillStyle屬性指定填充色，beginPath方法開始繪制路徑，moveTo方法將畫筆移動(dòng)到指定位置，lineTo方法繪制一條直線，closePath方法將路徑閉合，fill方法填充路徑。
此外，代碼中的for循環(huán)部分則用于繪制桌子的腿部。
上一篇php怎么修改css樣式
下一篇html5畫心代碼