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

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

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 gnt1 = cans.createLinearGradient(10,0,390,0);   
            gnt1.addColorStop(0,’red’);   
            gnt1.addColorStop(0.5,’green’);   
            gnt1.addColorStop(1,’blue’);   
            cans.fillStyle = gnt1;   
            cans.fillRect(10,10,380,280);   
        }   
    </script>  
    <body onload="pageLoad();">  
        <canvas id="can" width="400px" height="300px">4</canvas>  
    </body>  
</html>  
  

不解释了,记住fillRect(X,Y,Width,Height)就行了。

6、填充一个圆形

圆形的用途很广,当然也包含了椭圆。

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

<!doctype html>  
<html>