绘制一个圆形 drawingCircle.html
<html>
<head><title>绘制一个圆</title><script>
function drawingCircle(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(90, 120, 70, 0, 2 *Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="240" style="border:1px solid black;"></canvas>
<button οnclick="drawingCircle()">drawingCircle</button>
</body>
</html>
效果图: