Canvas绘制半透明圆形

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas绘制半透明圆形</title>
</head>
<body style="background-color: green;">
<canvas id="myCanvas" style="border:1px solid #ff0000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var w = canvas.width = parseInt(window.innerWidth*0.1);
var h = canvas.height = parseInt(window.innerWidth*0.1);
//检测当前浏览器是否支持Canvas对象
if(canvas.getContext){
var ctx = canvas.getContext("2d"); 
ctx.save();      
ctx.beginPath();
ctx.fillStyle="#000";
ctx.fillStyle = 'hsla(242, 30%, 5%, .55)';
ctx.arc(50, 50, w*0.5, Math.PI*2, 0); // 画一个圆
ctx.closePath() 
ctx.fill();
ctx.restore();
}else{
console.log('当前浏览器不支持canvas对象');
}
</script>
</body>
</html>