Canvas 学习笔记--渐变

标签：style   http   io   ar   color   os   sp   on   2014   

   先说一下经过吧，在学习完渐变后我想画多个渐变圆并且旋转。   

   但是每次后面的圆都被前面的遮挡住，开始是我没有fillRect好直接按照以前的习惯：

   c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);

   但是每次只能看见一个，果断郁闷了。检查了很久才发现其他的圆是被擦除了 - -！

   修改了一下：

    c.fillRect(x2d-Radius2,y2d-Radius2,x2d+Radius2,y2d+Radius2);

   （伤不起，每次都会有很多这样的小问题）

   然后正常了，至少都显示出来了。但是问题来了后面的被遮挡了。。。

   最后在Stack Overflow找到了一个类似问题的答案

    把渐变色设置为透明 ：grd.addColorStop(1, ‘transparent‘);

   grd = c.createRadialGradient(x2d, y2d, Radius1, x2d, y2d, Radius2);

    grd.addColorStop(0, ‘#fff‘);

    grd.addColorStop(1, ‘transparent‘);

    c.fillStyle = grd;

    c.fill();

    c.fillRect(x2d-Radius2,y2d-Radius2,x2d+Radius2,y2d+Radius2);

 （画多个不遮挡的圆的话，把‘#fff‘换成用rgba色值）

  最后效果：

  参考：http://stackoverflow.com/questions/5525874/createradialgradient-and-transparency

Canvas 学习笔记--渐变

标签：style   http   io   ar   color   os   sp   on   2014   

原文地址：http://my.oschina.net/u/1451286/blog/351288