HTML5是一種基礎(chǔ)性的網(wǎng)頁開發(fā)語言，可以讓我們更好地制作網(wǎng)頁。在HTML5中，我們可以使用canvas標(biāo)簽制作各種有趣的繪畫。讓我們通過利用HTML5制作一只小烏龜：
<!DOCTYPE html>
<html>
<head>
<title>繪制小烏龜</title>
<style>
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 繪制小烏龜
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(300, 200);
ctx.lineTo(300, 250);
ctx.lineTo(200, 250);
ctx.closePath();
ctx.fillStyle = "#6B8E23";
ctx.fill();
ctx.beginPath();
ctx.arc(225, 225, 10, 0, 2 * Math.PI);
ctx.fillStyle = "black";
ctx.fill();
</script>
</body>
</html>使用canvas標(biāo)簽可以讓我們在網(wǎng)頁中繪制各種形狀，上述代碼繪制了一個小烏龜?shù)男螤睿ㄟ^填充顏色來展示出烏龜?shù)耐庥^。在canvas中，使用context（上下文）對象進(jìn)行繪圖。我們使用getContext（“2d”）方法來創(chuàng)建2D渲染環(huán)境并獲取context對象。我們使用beginPath方法開始構(gòu)建我們的形狀（即小烏龜），然后使用類似于畫筆的方法在canvas上完成繪圖。我們可以使用fillStyle屬性來設(shè)置填充的顏色，使用fill方法將顏色填充到小烏龜?shù)膬?nèi)部。同時，我們可以使用arc方法繪制小烏龜?shù)难劬ΑＴ贖TML5和canvas的幫助下，制作有趣的網(wǎng)頁變得越來越容易。
上一篇html5代碼折疊