今回は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();
正規表現を使用して IP アドレスとドメイン名を照合する方法
以上がH5の五芒星の描き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。