Heim > Artikel > Web-Frontend > Ein Beispiel für das Zeichnen der roten Fünf-Sterne-Flagge mit h5Canvas

Ein Beispiel für das Zeichnen der roten Fünf-Sterne-Flagge mit h5Canvas

零下一度Original: 2017-05-25 13:40:363150Durchsuche

Dieser Artikel führt Sie hauptsächlich in den Code zum Zeichnen der roten Fünf-Sterne-Flagge in HTML5 ein. Das Canvas-Tag wird zum Definieren von Grafiken verwendet und ist ein Grafikcontainer Der Editor teilt Ihnen den Implementierungscode mit.

Die Canvas-Zeichnungs-API ist nicht im 5ba626b379994d53f7acf72a64f9b697-Element selbst definiert, sondern in einem „Zeichnungsumgebungs“-Objekt, das über die getContext()-Methode des Canvas abgerufen wird.

Canvas API verwendet auch Pfaddarstellung. Ein Pfad wird jedoch durch eine Reihe von Methodenaufrufen definiert, z. B. Aufrufe der Methoden beginPath() und arc(), und nicht als Zeichenfolge aus Buchstaben und Zahlen beschrieben.

Sobald ein Pfad definiert ist, arbeiten andere Methoden, wie etwa fill(), auf diesem Pfad. Verschiedene Eigenschaften der Zeichenumgebung, wie etwa fillStyle, beschreiben, wie diese Vorgänge verwendet werden.

Zeichnen Sie die chinesische Flagge mit Canvas, Code:

XML/HTMLCodeKopieren Sie den Inhalt in die Zwischenablage

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>中国标准国旗</title>
    </head>
    <body>
        <canvas id="canvas" width="600" height="400"></canvas>
        <script type="text/javascript">
            // 使用HTML5绘制标准五星红旗   
            var canvas = document.getElementById("canvas");   
            var context = canvas.getContext(&#39;2d&#39;);   
            var width = canvas.width;   
            var height = width * 2 / 3;   
            var w = width / 30;//小网格的宽   
            context.fillStyle = "red";   
            context.fillRect(0, 0, width, height);   
            var maxR = 0.15, minR = 0.05;//   
            var maxX = 0.25, maxY = 0.25;//大五星的位置   
            var minX = [0.50, 0.60, 0.60, 0.50];   
            var minY = [0.10, 0.20, 0.35, 0.45];   
            // 画大 ☆   
            var ox = height * maxX, oy = height * maxY;   
            create5star(context, ox, oy, height * maxR, "#ff0", 0);//绘制五角星   
            // 画小 ★   
            for (var idx = 0; idx < 4; idx++) {   
                var sx = minX[idx] * height, sy = minY[idx] * height;   
                var theta = Math.atan((oy - sy) / (ox - sx));   
                create5star(context, sx, sy, height * minR, "#ff0", -Math.PI / 2 + theta);   
            }   
            //辅助线   
            context.moveTo(0, height / 2)   
            context.lineTo(width, height / 2);   
            context.stroke();   
            context.moveTo(width / 2, 0);   
            context.lineTo(width / 2, height);   
            context.stroke();   
            //画网格，竖线   
            for (var j = 0; j < 15; j++) {   
                context.moveTo(j * w, 0);   
                context.lineTo(j * w, height / 2);   
                context.stroke();   
            }   
            //画网格，横线   
            for (var j = 0; j < 10; j++) {   
                context.moveTo(0, j * w);   
                context.lineTo(width / 2, j * w);   
                context.stroke();   
            }   
            //画大圆   
            context.beginPath();   
            context.arc(ox, oy, maxR * height, 0, Math.PI * 2, false);   
            context.closePath();   
            context.stroke();   
            // 画小圆   
            for (var idx = 0; idx < 4; idx++) {   
                context.beginPath();   
                var sx = minX[idx] * height, sy = minY[idx] * height;   
                context.arc(sx, sy, height * minR, 0, Math.PI * 2, false);   
                context.closePath();   
                context.stroke();   
            }   
            //大圆中心与小圆中心连接线   
            for (var idx = 0; idx < 4; idx++) {   
                context.moveTo(ox, oy);   
                var sx = minX[idx] * height, sy = minY[idx] * height;   
                context.lineTo(sx, sy);   
                context.stroke();   
            }   
            //绘制五角星   
            /**   
             * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上   
             * rotate:绕对称轴旋转rotate弧度   
             */   
            function create5star(context, sx, sy, radius, color, rotato){   
                context.save();   
                context.fillStyle = color;   
                context.translate(sx, sy);//移动坐标原点   
                context.rotate(Math.PI + rotato);//旋转   
                context.beginPath();//创建路径   
                var x = Math.sin(0);   
                var y = Math.cos(0);   
                var dig = Math.PI / 5 * 4;   
                for (var i = 0; i < 5; i++) {//画五角星的五条边   
                    var x = Math.sin(i * dig);   
                    var y = Math.cos(i * dig);   
                    context.lineTo(x * radius, y * radius);   
                }   
                context.closePath();   
                context.stroke();   
                context.fill();   
                context.restore();   
            }   
        </script>
    </body>
</html>

[Verwandte Empfehlungen]

1. Kostenloses h5-Online-Video-Tutorial

2. HTML5-Leinwandzeichnungs-Rose-Effekt_html5-Tutorial-Tipps

3. HTML5-Leinwand: Verlaufsfarbe zeichnen

Das obige ist der detaillierte Inhalt vonEin Beispiel für das Zeichnen der roten Fünf-Sterne-Flagge mit h5Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eingehende Analyse des HTML5-Inline-Frame-iFrameNächster Artikel：Eingehende Analyse des HTML5-Inline-Frame-iFrame

In Verbindung stehende Artikel

Mehr sehen