コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 キャンバスの詳細な紹介

HTML5 キャンバスの詳細な紹介

零下一度
リリース： 2017-07-16 15:42:03
オリジナル
3233 人が閲覧しました

この記事では主に、Web ページにグラフィックを描画するために使用される canvas 要素について説明します。興味のある方はぜひ

HTML5のキャンバスの機能について

1.まずキャンバス(キャンバス)を作成します

2.

JavaScript

を使って画像を描画します3. . Canvas - Path

moveTo(x,y) ラインの開始座標を定義

lineTo(x,y) ラインの終了座標を定義

1, Canvas 定義

<canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000”></canvas>
ログイン後にコピー
Default < Canvas> キャンバスには、ページ上に空白の境界線のない四角形が表示されます。アウトラインを表示するには、スタイル ルールを定義して点線の境界線を追加します。 
<script>
      Var c=document.getElementByID(“myCanvas”)//得到画布
      Var ctx=c.getContext(“2d”);//得到画笔
      Cxt.fillStyle=”#FF0000”;//填充颜色
      Cxt.fillRect(0,0,150,75);//规定顶点
</script>
ログイン後にコピー

2、Canvas のコンテキスト オブジェクトを取得します

drawing

タスクを完了するには、まず、 オブジェクトを取得し、その 2 次元描画コンテキストを取得します。

次の例は、ページのロード時に描画コンテキストを取得する方法を示しています: 

<canvas id="myCanvas" width="400" height="200">
ログイン後にコピー


3、直線を描きます

(1) 以下では、開始点は (50,50) であり、終点は (150,150) 直線 

canvas {
    border: 1px dashed black;
}
ログイン後にコピー


(2) lineWidth 属性とストロークスタイル 属性

を使用して、線の幅と色をそれぞれ設定します 

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
 
        //这里写绘图代码
    }
</script>
ログイン後にコピー


(3) lineCap 属性を使用して、線の両端の形状を設定します (線頭タイプ):

butt: 四角頭 (デフォルト値)

  1. round: 丸い頭

  2. square: 長くなった四角頭 (効果は butt と似ていますが、線幅の半分が線の両端に追加されます) length)

context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();
ログイン後にコピー


注: 描画コンテキストの beginPath() メソッド

上の例では、新しい線分の描画が開始されるたびに beginPath() メソッドを呼び出す必要があることがわかります。

そのようなステップがない場合は、ストローク()が呼び出されるたびに、キャンバス上の元の線分が再描画されます。特に上記の例のように、新しい線分を描画するときにコンテキスト プロパティを変更する必要があります。 beginPath() メソッドが呼び出されない場合、元の直線も新しいスタイルを使用して描画されます。

以上がHTML5 キャンバスの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
h5 html5 導入
ソース：php.cn
前の記事：アプリケーションキャッシュとは何ですか? 次の記事：HTML5 オーディオの関連例の紹介
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート