Maison > interface Web > Tutoriel H5 > Exemple de code pour dessiner des rectangles et des cercles sur un canevas HTML5

Exemple de code pour dessiner des rectangles et des cercles sur un canevas HTML5

黄舟
Libérer: 2017-02-24 14:06:36
original
1373 Les gens l'ont consulté

Exemple de code pour un canevas html5 pour dessiner des rectangles et des cercles

<!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>
Copier après la connexion



Ce qui précède est le canevas html5 à dessinez des rectangles et des cercles Le contenu de l'exemple de code circulaire Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal