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

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

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('ca'); //获取canvas元素   

            if (canvas==null)   

               return false;   

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

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

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

            context.fillStyle='red';   

            context.strokeStyle='blue'; //边框颜色   

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

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

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

               

        }   

        //绘制圆形   

       function drawarc(){   

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

            if (canvas2==null)   

        if(canvas2==null)   

           return false;   

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

           context2.fillStyle='#EEEEEF';   

           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='Rgba(255,0,0,0.25)'; //设置颜色   

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

           }   

    }   

           

           

    </script>

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

html5，canvas，矩形和圆形 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

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

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