HTML5 可以在網頁中直接繪制圖像，這讓你可以使用 HTML5 的畫布元素在網頁上自由繪制。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>上述代碼實現了在網頁中畫一個紅色的矩形。其中使用了 canvas 元素，該元素允許我們使用JavaScript在其中繪制圖像。我們獲取了該元素的上下文并設置其樣式，然后通過 fillRect() 方法繪制一個紅色矩形。
除了實現簡單的圖形，HTML5 的畫布元素也可以實現更加復雜的圖像繪制，比如漸變、陰影等等。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 創建漸變
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充漸變
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>上述代碼實現了在網頁中使用線性漸變填充了一個矩形。我們首先創建了一個線性漸變，然后將其設置為樣式，最后使用 fillRect() 方法填充該樣式為漸變的矩形。
HTML5 的畫布元素提供了極大的靈活性，允許我們通過 JavaScript 在其中自由繪制圖像，不管是簡單的圖形還是復雜的圖像都可以輕松實現。通過 HTML5 畫布元素，我們能夠實現更加豐富的網頁交互效果。
上一篇html5畫橢圓源代碼
下一篇php圖標css怎么查看