HTML5キャンバス

<canvas> タグはグラフやその他の画像などのグラフィックを定義します。グラフィックを描画するにはスクリプトを使用する必要があります。

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

Canvas とは何ですか? グラフを描画するにはスクリプトを使用する必要があります。

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

ブラウザのサポート

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

注:

Internet Explorer 8 以前の IE バージョンはサポートしていません。 Canvas> 要素。

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

キャンバスは、<canvas> 要素によって描画されます。

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

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

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

ヒント:

HTML ページで複数の <canvas> 要素を使用できます。

境界線を追加するには、style 属性を使用します:

例

<!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 #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

</body>
</html>

サンプルの実行 »

[サンプルの実行] ボタンをクリックしてオンラインサンプルを表示します

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

インスタンス

<!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 #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>

サンプルの実行»

オンラインサンプルを表示するには、[インスタンスの実行]ボタンをクリックしてください

サンプル分析:

まず、<を見つけます;canvas> ; 要素:
var c=document.getElementById("myCanvas");

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

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

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

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

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

CSS カラーにできる fillStyle プロパティを設定します。、グラデーション、またはパターン。塗りつぶしスタイルデフォルト設定は #000000 (黒) です。

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

キャンバス座標

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

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

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

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

座標例

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

Canvas - パス

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

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

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

インスタンス

<!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");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

</script>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックします。オンラインの例を確認してください。

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

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

実際には、ストローク() や fill() などの「インク」メソッドを使用します。

インスタンス

<!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");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

</script> 

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください

Canvas - Text

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

font - フォントを定義します。
fillText(text,x,y) - ソリッドテキストを描画します。 canvas
strokeText（text、x、y） - canvas

usefilltext（）で中空のテキストを描く：

<!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");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

</script>

</body>
</html>

runインスタンス» 「インスタンス」ボタンをクリックしてオンライン例を表示します
ストロークText()の使用:

インスタンス

<!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");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

</script>

</body>
</html>

サンプルの実行 »

オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

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

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

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

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

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

gradient を使用し、fillStyle または stopStyle の値を設定します。グラデーションを付けてから、長方形、テキスト、線などの形状を描画します。 use createLineargradient（）：instance

rreee

runインスタンス»

オンラインインスタンスを表示する「runインスタンス」ボタンをクリックしてcreateradialgradient（）：

instance

rreee

サンプルの実行 »

「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します

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

drawImage(

image,x ,y

)

例

<!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.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

</body>
</html>

オンライン例を表示するには、「例を実行」ボタンをクリックしてください

HTMLキャンバスリファレンスマニュアル

HTML <canvas> タグ

HTML5キャンバス

Canvas とは何ですか? グラフを描画するにはスクリプトを使用する必要があります。

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

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

サンプル分析:

キャンバス座標

Canvas - パス

インスタンス

インスタンス

Canvas - Text

runインスタンス»

)

タグ

PHP中国語ウェブサイト