上一篇中写了滤镜的效果,这一次把滤镜效果写在圆上,和上一篇原理是一样的
先截个图:
代码如下
<html lang="en-US">
<canvas id=myCanvas width=500px height=500px></canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
context.fillStyle = "#e4e4e4";
context.fillRect(0,0,500,500);
context.fillStyle = "rgba(255,0,0,0.2)";
for(i=1;i<15;i++)
{
context.beginPath(); //清除前面的路径,否则颜色会叠加
context.arc(30*i,30*i,10*i,0,2*Math.PI,true);
context.fill();
}
</script>
</html>