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>