コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語

HTML5キャンバス

Canvas とは何ですか?

HTML5 <canvas> 要素は、スクリプト (通常は JavaScript) を通じて実行されます。

キャンバス (キャンバス) 上に赤い四角形、グラデーションの四角形、色を描画します。長方形といくつかの色付きのテキスト。

<canvas> タグは単なるグラフィック コンテナであり、グラフィックを描画するにはスクリプトを使用する必要があります。

Canva を使用すると、さまざまな方法でパス、ボックス、円、文字を描画したり、画像を追加したりできます。

ブラウザのサポート

7.jpg


Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari は <canvas> 要素をサポートします。注

: Internet Explorer IE バージョン 8 以前のブラウザは、<canvas> 要素をサポートしていません。 キャンバス (キャンバス) を作成します。

キャンバスは、<canvas> を通じて描画される、Web ページ内の長方形のボックスです。 element .

注: デフォルトでは、<canvas> 要素には境界線とコンテンツがありません。 <canvas> 簡単な例は次のとおりです:

<canvas id="myCanvas" width="200" height="100"></canvas>

注
:通常、タグは必須です。 id 属性 (スクリプトでよく参照される)、幅と高さの属性で定義されるキャンバスのサイズを指定します。

ヒント: HTML ページで複数の <canvas> 要素を使用できます

style 属性を使用して境界線を追加します: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #28c9b6;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
</body>
</html>

プログラムを実行して試してください

JavaScript を使用してimage

Canvas 要素自体には描画機能がありません。すべての描画作業は JavaScript 内で行う必要があります:

例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
</script>
</body>
</html>

プログラムの実行結果:

1.jpg

分析の例:

まず、<canvas> 要素を見つけます:

var c=document.getElementById("myCanvas");

次に、コンテキスト オブジェクトを作成します:

var ctx=c.getContext("2d");

getContext(" 2d ") オブジェクトは、パス、四角形、円、文字を描画し、画像を追加するためのさまざまなメソッドを備えた組み込みの HTML5 オブジェクトです。

次の 2 行のコードは、赤い四角形を描画します:

ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);

可能な fillStyle 属性を設定します。 CSS カラー、グラデーション、またはパターン。 fillStyle のデフォルト設定は #000000 (黒) です。

fillRect(x,y,width,height) メソッドは、四角形の現在の塗りつぶし方法を定義します。

キャンバス座標

キャンバスは2次元グリッドです。

キャンバスの左上隅の座標は(0,0)です

上記のfillRectメソッドにはパラメータ(0,0,150,75)があります。

意味: キャンバス上に左上隅 (0,0) から開始して 150x75 の長方形を描画します。

座標例

以下の図に示すように、キャンバスの X 座標と Y 座標を使用して、キャンバス上に絵画を配置します。マウスを移動した四角枠上に位置座標が表示されます。

1.jpg

Canvas - パス

Canvas 上に線を描くには、次の 2 つのメソッドを使用します:

moveTo(x,y) で線を定義 開始座標

lineTo(x, y) 線を定義します終了座標

線を描くには、ストローク()と同じように、「ink」メソッドを使用する必要があります。

例

開始座標(0,0)を定義します、および終了座標 (200,100 ) を使用して線を描画します: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d31029;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
</script>
</body>
</html>

プログラムの実行結果:

8.jpg

キャンバスに円を描画するには、次のメソッドを使用します:

arc(x, y, r, start, stop)

実際、円を描くときは、stroke() や fill() などの「ink」メソッドを使用します。例

arc() メソッドを使用して円を描画します: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #1d17ff;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
</script>
</body>
</html>
プログラムの実行結果:

4.jpgCanvas - Text

Canvas を使用してテキストを描画します。 重要な属性とメソッドは次のとおりです。

フォント

- フォントを定義します

fillText( text,x,y) - キャンバス上に実線のテキストを描画します

ストロークText(text,x,y) - キャンバス上に白抜きのテキストを描画します

例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";
    ctx.fillText("Hello World",10,30);
    ctx.strokeText("你好吗！",10,80);
</script>
</body>
</html>
プログラム実行結果:

8.jpg

キャンバス - グラデーション

グラデーションは、長方形、円、線、テキストなどで塗りつぶすことができます。さまざまな形状を異なる色で定義できます。

キャンバスのグラデーションを設定するには 2 つの異なる方法があります:

createLinearGradient(x,y,x1,y1) - 線のグラデーションを作成します

createRadialGradient(x,y,r,x1,y1,r1) ) - 放射状/円形のグラデーションを作成します

グラデーション オブジェクトを使用するときは、2 つ以上のストップ カラーを使用する必要があります。

addColorStop()このメソッドは、カラーストップを指定します。パラメータは、0から1の座標で記述されます。

グラデーションを使用し、fillStyleまたはストロークスタイルの値をグラデーションに設定して、形状を描画します。 、四角形、テキスト、線など。

インスタンス

createLinearGradient() を使用して線形グラデーションを作成します。長方形をグラデーションで塗りつぶします: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // 创建渐变
    var grd=ctx.createLinearGradient(0,0,200,10);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    // 充满度
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

プログラムの実行結果:

3.jpg

例

createRadialGradient() を使用して、放射状/円形のグラデーションを作成します。長方形をグラデーションで塗りつぶします: 

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // Create gradient
    var grd=ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    // Fill with gradient
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

プログラムの実行結果:

5.jpg

Canvas - 画像

キャンバスに写真を置くことができるので、写真上で操作を行ったり、テキストなどの必要な素材を追加したりできます。

画像をキャンバスに配置します次のメソッドを使用します:

drawImage(image,x,y)

画像を使用する

7.jpg

例

1つ入れてください画像がキャンバスに配置されます:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p>使用图像:</p>
<img id="scream" src="http://img.blog.163.com/photo/g8yDNFsGMeq-pzHY2_n3aQ==/356628795492853826.jpg" alt="The Scream" width="220" height="277"><p>画布:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    img.onload = function() {
        ctx.drawImage(img,10,10);
    }
</script>
</body>
</html>

プログラムの実行結果:

1.jpg

HTML Canvas Reference Manual

タグの完全なプロパティは Canvas Reference Manual にあります。 .

HTML <canvas> タグ

<canvas>

HTML5 の Canvas 要素の使用法 JavaScript は Web ページ上に画像を描画します。

学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,30); ctx.strokeText("你好吗！",10,80); </script> </body> </html>
提出するリセットコード
前のセクション 次のセクション
チュートリアルリスト
ヘルプの取得
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜

このコースを視聴した生徒はこちらも学んでいます

最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)  493680 回再生