HTML5で五芒星を作る方法

HTML5 では、canvas タグおよび関連する JavaScript プロパティおよびメソッドを通じて五芒星を描画できます。canvas タグは、スクリプト (通常は JavaScript) を通じてグラフィックを動的に描画するために使用されます。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

は、HTML5 の新しいタグで、グラフィックを描画するために使用されます。この記事では、主に HTML5 のキャンバスの基本的な描画の詳細と、5 つのキャンバスの描画方法を紹介します。尖った星。興味のある友達は

を参照してください。

は HTML5 の新しいタグで、グラフィックを描画するために使用されます。実際、このタグは他のタグと同じですタグとしての特別な機能は、タグが CanvasRenderingContext2D オブジェクトを取得できることです。また、JavaScript スクリプトを通じて描画用のオブジェクトを制御できることです。

はグラフィックを描画するための単なるコンテナであり、id、class、style などの属性に加えて、height 属性と width 属性もあります。 > 要素に描画するには、主に 3 つの手順があります:

1. 要素に対応する DOM オブジェクト (Canvas オブジェクト) を取得します;
2. 呼び出しCanvasRenderingContext2D オブジェクトを取得するための getContext(Canvas オブジェクトの) メソッド;

3. 描画のために CanvasRenderingContext2D オブジェクトを呼び出します。

五芒星を分析することで、各頂点の座標の規則を決定することができますが、ここで注意すべき点は、キャンバス内では Y 軸の方向が下であることです。

対応するコードは次のとおりです:

var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    context.beginPath();   
    //设置是个顶点的坐标，根据顶点制定路径   
    for (var i = 0; i < 5; i++) {   
        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,   
                        -Math.sin((18+i*72)/180*Math.PI)*200+200);   
        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,   
                        -Math.sin((54+i*72)/180*Math.PI)*80+200);   
    }   
    context.closePath();   
    //设置边框样式以及填充颜色   
    context.lineWidth="3";   
    context.fillStyle = "#F6F152";   
    context.strokeStyle = "#F5270B";   
    context.fill();   
    context.stroke();

最終効果:

その他のプログラミング関連知識については、プログラミング ビデオ

をご覧ください。 ！ ###

以上がHTML5で五芒星を作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。