首页 > 文章 > web前端 > html5 canvas绘制矩形和圆形的实例代码

html5 canvas绘制矩形和圆形的实例代码

黄舟原创: 2017-02-24 14:06:361349浏览

html5 canvas绘制矩形和圆形的实例代码

<!DOCTYPE html>   

    <html>   

        <head>   

            <meta charset="UTF-8">   

            <title></title>   

        </head>   

        <body onload="draw(),drawarc()">   

            <!--绘制的步骤：获取canvas元素->取得上下文->填充与绘制边框->设定绘图样式-->   

            <!--绘制其他复杂图形需要使用路径：开始创建路径->创建图形路径->关闭路径->绘制图形-->   

            <!--eg:绘制矩形-->   

            绘制矩形:<canvas id="ca"></canvas><br />   

            绘制圆形：<canvas id="yuan"></canvas>   

        </body>   

    </html>   

    <script>   

        //绘制矩形   

        function draw(){   

            var canvas=document.getElementById(&#39;ca&#39;); //获取canvas元素   

            if (canvas==null)   

               return false;   

            var context=canvas.getContext(&#39;2d&#39;); //取得上下文   

            context.fillStyle=&#39;#EEEFF&#39;;   //填充颜色   

            context.fillRect(0,0,400,300); //填充矩形 (矩形1)   

            context.fillStyle=&#39;red&#39;;   

            context.strokeStyle=&#39;blue&#39;; //边框颜色   

            context.lineWidth=1;        //边框宽度   

            context.fillRect(50,50,100,100); //填充矩形（内部矩形2）   

            context.strokeRect(50,50,100,100); //绘制边框   

               

        }   

        //绘制圆形   

       function drawarc(){   

        var canvas2=document.getElementById(&#39;yuan&#39;); //获取canvas元素   

            if (canvas2==null)   

        if(canvas2==null)   

           return false;   

           var context2=canvas2.getContext(&#39;2d&#39;);  //取得上下文   

           context2.fillStyle=&#39;#EEEEEF&#39;;   

           context2.fillRect(0,0,400,300);   

           var n=0;   

           for(var i=0;i<10;i++){   

                  context2.beginPath();  //开始创建路径   

                  context2.arc(i*25,i*25,i*10,0,Math.PI*2,true);  //创建圆形路径   

                  context2.closePath();  //关闭路径   

                  context2.fillStyle=&#39;Rgba(255,0,0,0.25)&#39;; //设置颜色   

                  context2.fill();  //填充图形   

           }   

    }   

           

           

    </script>

以上就是html5 canvas绘制矩形和圆形的实例代码的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：调用HTML5的Canvas API绘制图形的快速入门指南下一篇：浅谈html5增强的页面元素

查看更多

html5 canvas绘制矩形和圆形的实例代码

相关文章