H5の五芒星の描き方

php中世界最好的语言
リリース: 2018-01-09 09:22:43
オリジナル
3850 人が閲覧しました

今回はH5を使った五芒星の描き方を紹介します。 H5を使って五芒星を描くには? H5 で五芒星を描くための注意点は何ですか? ここで実際のケースを見てみましょう。

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

は、id、class、style などの属性に加えて、高さと幅の属性もあります。 > 要素に描画するには、次の 3 つの主な手順があります:

1. Canvas オブジェクトである

DOM オブジェクトを取得します。 Canvas オブジェクトのメソッドを使用して CanvasRenderingContext2D オブジェクトを取得します。 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();
ログイン後にコピー

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

正規表現を使用して IP アドレスとドメイン名を照合する方法

ハイライトを表示できる正規表現の種類

WeChat アプレットにアバターをアップロードする方法

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート