★HTML Living Standard リファレンス

私たちはカジノサイトを独自にレビューしています。当社のリンクを通じてサインアップすると、追加料金なしで当社に手数料が発生する場合があります。

<canvas> …… スクリプトで図形を描く
Internet Explorer
Microsoft Edge
Google Chrome
Safari
Firefox
Opera
広告



<canvas>タグは、スクリプトで図形を描く際に使用します。

canvas要素は、ビットマップキャンバスをスクリプトに提供します。
canvas要素を使うと、グラフ、ゲームグラフィックス、アート、その他のビジュアルイメージを
スクリプトを使って描くことができます。

<canvas>~</canvas>の内側に配置するcanvas要素の内容は、
canvas要素がサポートされていない環境で表示されるフォールバックコンテンツです。

canvas要素は、CSSで任意のサイズに設定できます。
また、canvas要素で作成されるビットマップは、object-fitプロパティの影響を受けます。

■属性

width属性
canvas要素のwidth属性は、キャンバス画面の幅(水平寸法)を制御します。
値は正の整数で指定します。(初期値は300)
height属性
canvas要素のheight属性は、キャンバス画面の高さ(縦寸法)を制御します。
値は正の整数で指定します。(初期値は150)

Canvasのより詳しい仕様については、以下を参照してください。

■使用例

以下のサンプルは、
Canvasの仕様で定義されている
fillRect()メソッド、strokeRect()メソッド、arc()メソッドを使用して、
四角形、四角の枠線、半円を描いています。

CSSのbackground-color:yellow;の指定でcanvas要素の背景色を黄色くして、
canvas要素の領域(幅300×高さ150)を分かりやすくしています。

HTMLソース

<body onLoad="sample()">

<script>
function sample() {

 //描画コンテキストの取得
 const canvas1 = document.getElementById('sample1');

 if (canvas1.getContext) {
  const context1 = canvas1.getContext('2d');

  //左から20上から40の位置に、幅50高さ100の四角形を描く
  context1.fillRect(20,40,50,100);

  //色を指定する
  context1.strokeStyle = 'rgb(00,00,255)'; //枠線の色は青
  context1.fillStyle = 'rgb(255,00,00)'; //塗りつぶしの色は赤

  //左から200上から80の位置に、幅100高さ50の四角の枠線を描く
  context1.strokeRect(200,80,100,50);

  //左から150上から75の位置に、半径60の半円を反時計回り(左回り)で描く
  context1.arc(150,75,60,Math.PI*1,Math.PI*2,true);
  context1.fill();
 }

}
</script>
<canvas id="sample1" style="background-color:yellow;">
 <p>図形を表示するには、canvasタグをサポートしたブラウザが必要です。</p>
</canvas>

↓↓↓

ブラウザ上の表示


図形を表示するには、canvasタグをサポートしたブラウザが必要です。

■使用例

以下のサンプルは、
Canvasの仕様で定義されている
fillRect()メソッドで赤い長方形を描き、
getImageData()メソッドでそのイメージデータを取得して、
その内容をコンソールにログ出力しています。

HTMLソース

<canvas id="sample2"></canvas>

<script>
const canvas2 = document.getElementById('sample2');
const context2 = canvas2.getContext('2d', {colorSpace:'display-p3'});

// 赤い長方形を描きます。
context2.fillStyle = "#FF0000";
context2.fillRect(0, 0, 64, 64);

// イメージデータを取得します。
const pixels = context2.getImageData(0, 0, 1, 1);

//「display-p3」が出力されます。
console.log(pixels.colorSpace);

// 赤色のRGB値 234、51、35 が出力されます。
console.log(pixels.data[0]);
console.log(pixels.data[1]);
console.log(pixels.data[2]);
</script>

↓↓↓

ブラウザ上の表示

■使用例

以下のサンプルは、canvas要素を使用してランダムな線をタイマー描画するスクリプトの例です。

HTMLソース

<canvas width="800" height="450"></canvas>
<script>

 var context = document.getElementsByTagName('canvas')[0].getContext('2d');

 var lastX = context.canvas.width * Math.random();
 var lastY = context.canvas.height * Math.random();
 var hue = 0;
 function line() {
   context.save();
   context.translate(context.canvas.width/2, context.canvas.height/2);
   context.scale(0.9, 0.9);
   context.translate(-context.canvas.width/2, -context.canvas.height/2);
   context.beginPath();
   context.lineWidth = 5 + Math.random() * 10;
   context.moveTo(lastX, lastY);
   lastX = context.canvas.width * Math.random();
   lastY = context.canvas.height * Math.random();
   context.bezierCurveTo(context.canvas.width * Math.random(),
                         context.canvas.height * Math.random(),
                         context.canvas.width * Math.random(),
                         context.canvas.height * Math.random(),
                         lastX, lastY);

   hue = hue + 10 * Math.random();
   context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
   context.shadowColor = 'white';
   context.shadowBlur = 10;
   context.stroke();
   context.restore();
 }
 setInterval(line, 50);

 function blank() {
   context.fillStyle = 'rgba(0,0,0,0.1)';
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);
 }
 setInterval(blank, 40);

</script>

↓↓↓

ブラウザ上の表示

別画面で開く

より適切な要素がないか検討する

より適切な要素が利用できるなら、canvas要素を使用しないでください。
例えば、ページの見出しをレンダリングするためにcanvas要素を使用するのは不適切です。
見出しの表示がグラフィックを重視する場合は、
適切な要素(通常はh1要素)を使用してマークアップし、
CSSなどを使用してスタイルを設定するべきでしょう。

■関連項目

  • <script> …… スクリプトを表す
  • <noscript> …… スクリプトが無効な環境向けの内容を表す
  • <canvas> …… スクリプトで図形を描く
広告



山田 太郎
テック・リード
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

ギャンブルガイド もっと見る

カジノファインダー

どのカジノが自分に最適か分からないですか?

サインアップは必要なく、1 分以内に最適なブックメーカーを簡単に見つけることができます。
カジノを探す
Back
質問
Select one of the following options
{"is_any_tile":true}

どのカジノが自分に最適か分からないですか?

Back
Restart
やったー!
これはあなたの選択に基づいた最高のカジノです...
63 users signed up
もっと表示する