HTML5 canvas画圆

今天就给大家演示一下使用canvas画圆

var canvas = document.getElementById("canvas");
 canvas.width = 500;
 canvas.height = 500;
var context = canvas.getContext("2d");
context.arc(200,200,100,0,2*Math.PI,true);//画圆，x,y.r, ,pi值，true逆时针/false、顺时针
context.lineWidth = 10;//线宽
context.strokeStyle = "red";//线条颜色
context.fillStyle = "green";//填充颜色样式
context.globalAlpha = 0.5 ;// 全局透明
context.fill();//进行填充
context.stroke();//开始画圆

不知道现在大家是什么心情，现在快快尝试吧。

是不是感觉有些多呢?

其实大家可以把这写封装成为一个函数，这样以后使用起来是不是就很便捷呢？