canvas畫布可以見單的繪制一些圖形，同時也可以制作一些較為炫酷的效果哦！以下是簡單的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>眩暈圓</title>
</head>
<body>
<!-- 添加canvas標簽，並加上紅色邊框以便於在頁面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的瀏覽器不支持canvas標簽。
</canvas>
<script type="text/javascript">
//獲取Canvas對象(畫布)
var canvas = document.getElementById("myCanvas");
//簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤
if(canvas.getContext){
//獲取對應的CanvasRenderingContext2D對象(畫筆)
var ctx = canvas.getContext("2d");
//繪制一個以坐標點(100,100)為圓心、半徑為50px的圓形
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
//創建一個表示放射性顏色漸變的CanvasGradient對象
//該對象的作用域是以(100,100)為圓心、半徑為10px的內圓和以(100,100)為圓心、半徑為50px的外圓之間的環狀區域
var canvasGradient = ctx.createRadialGradient(100, 100, 10, 100, 100, 50);
//在offset為0的位置(即內圓的圓圈處)添加一個藍色的漸變
canvasGradient.addColorStop(0, "blue");
//在offset為0.5的位置(環狀區域從內到外放射50%的中間位置)添加一個綠色的漸變
canvasGradient.addColorStop(0.5, "green");
//在offset為0的位置(即外圓的圓圈處)添加一個紅色的漸變
canvasGradient.addColorStop(1, "red");
//將fillStyle的屬性值設為該CanvasGradient對象
ctx.fillStyle = canvasGradient;
ctx.fill();
}
</script>
</body>
</html>
簡簡單單的代碼就完成了，運行結果如下：
好了，今天的代碼就這么多！