HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canva

2020-04-24 19:55:42易采站长站整理

    </body>  
</html>  

这里不解释了,和上边的例子相同,lineWidth是控制线条的宽度的。

8、圆形渐变

 

XML/HTML Code复制内容到剪贴板

<!doctype html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
    </head>  
    <style type="text/css">  
        canvas{border:dashed 2px #CCC}   
    </style>  
    <script type="text/javascript">  
        function $$(id){   
            return document.getElementById(id);   
        }   
        function pageLoad(){   
            var can = $$(‘can’);   
            var cancans = can.getContext(‘2d’);   
            var gnt = cans.createRadialGradient(200,300,50,200,200,200);   
            gnt.addColorStop(1,’red’);   
            gnt.addColorStop(0,’green’);   
            cans.fillStyle = gnt;   
            cans.fillRect(0,0,800,600);   
        }   
    </script>  
    <body onload="pageLoad();">  
        <canvas id="can" width="800px" height="600px">4</canvas>  
    </body>  
</html>  

这里需要说明的是createRadialGradient方法,参数有(Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd),也就是说,它在实行渐变时,使用了两个圆,一个是原始的圆,一个是渐变式圆,其实,这种通过坐标与半径控制的方式可以实现很多样式,比如