首页 >web前端 >H5教程 > 正文

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

原创2020-10-26 14:33:210326
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中文网(www.php.cn)!

以上就是html5 canvas绘制矩形和圆形的实例代码 的详细内容,更多请关注php学习网其它相关文章!

phpStudy Linux 面板(小皮面板)
  • 相关标签:html5,canvas,矩形和圆形
  • 本文原创发布php学习网,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    php学习网

    认证0级讲师

    推荐视频教程
  • javascript初级视频教程javascript初级视频教程
  • jquery 基础视频教程jquery 基础视频教程
  • 视频教程分类