マインドマップギャラリー CanvasHTML5 新しいタグ ナレッジ ポイント メモ マインド マップ
CanvasHTML5 では、新しいタグ、ナレッジ ポイント ノート、マインド マップが追加されています。canvas は、img と同様のインライン ブロック要素です。
これはバクテリアに関するマインドマップであり、その主な内容には、概要、形態、種類、構造、生殖、分布、アプリケーション、および拡張が含まれます。概要は包括的で綿密で、レビュー資料として適しています。
これは、植物の無性生殖に関するマインドマップであり、その主な内容には、概念、胞子の生殖、栄養生殖、組織培養、芽が含まれます。概要は包括的で綿密で、レビュー資料として適しています。
これは、動物の生殖発達に関するマインドマップであり、その主な内容には、昆虫、カエル、鳥、性的生殖、無性生殖が含まれます。概要は包括的で綿密で、レビュー資料として適しています。
ビジネスモデルキャンバス
HTML5
HTML5 と CSS3 の知識ポイント
HTML5 CSS3のWebデザイン・制作
CanvasHTML5 新しいタグ ナレッジ ポイント メモ マインド マップ
意味
Canvas は描画効果を表示するためのタグで、img と同様のインラインブロック要素です。
同じページに複数のキャンバス タグを含めることができます
キャンバスのデフォルトは 300*150 です。キャンバスの幅と高さを設定するには、canvas 要素の属性を使用する必要があります。
ctx=cav.getContext("2d") メソッド
js で Canvas タグを取得したら、それを使用してキャンバスを開いてグラフィックを描画する必要があります。
描画手順
1.まずペンを指定の位置に移動します
2. 線を描き始めます
3. ストロークパス
ctx.moveTo(x軸移動座標、y軸移動座標)
指定した位置(始点)にペンが移動します
ctx.lineTo(x軸移動座標、y軸移動座標)
パスを描く
ctx.ストローク()
ストロークパス
ctx.ストロークスタイル = CSSの任意の色表現
ストロークの色の設定
ctx.lineWidth = 6
線幅の設定
ctx.closePath()
閉じたパス
ctx.beginPath()
現在のパスをクリアして新しいパスを開きます
ctx.fill()
充填
ctx.fillStyle = 色の表現
塗りつぶしの色
非ゼロラッピング原則:
* はパスに属する領域を決定するために使用されます (計算結果が 0 以外の場合、パス内にあることを意味します)。 * パスで囲まれた領域内でランダムな点を見つけて、外側に向けて光線を放射します。 * 周囲のすべてのエッジと交差します。 * 次に、0 からカウントするカウンターを開始します。 * この光線が時計回りのサラウンドに遭遇した場合、1、 * 反時計回りのサラウンドに遭遇した場合は -1、 * 最終値がゼロ以外の場合、この領域はパス内にあります。 * * 注: カーディナル エッジの領域はパス内にある必要があります。