canvas能用于绘制各种图形，那么如何使用html5 canvas绘制一个圆形呢？本篇文章就来给大家介绍关于html5 canvas绘制圆形的方法，下面我们来看具体的内容。
我们来直接看示例
代码如下
运行结果
浏览器上执行上述HTML文件。将会显示如下效果
立即学习“前端免费学习笔记（深入）”；
最后说明一点
arc()方法给出的圆的坐标是圆的中心坐标。
在上述的HTML代码中，将绘图部分设为下面的代码。
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var cx = 360;
var cy = 400;
var radius = 36;
var context = canvas.getContext('2d');
context.beginPath();
context.arc(cx, cy, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#9fd9ef';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#00477d';
context.stroke();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(cx, cy);
context.stroke();
}上述代码的显示效果如下，可以看到中心坐标是圆的中心。
