H5の五芒星の描き方-H5 チュートリアル-php.cn

H5の五芒星の描き方

php中世界最好的语言

リリース： 2018-01-09 09:22:43

オリジナル

3785 人が閲覧しました

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

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

は、id、class、style などの属性に加えて、高さと幅の属性もあります。

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 サイトの他の関連記事を参照してください。