html5-canvas チュートリアル
html5-canvasを使い始める

Android AngularJS Cordova CSS HTML JavaScript jQuery Node.js PHP SVG
サーチ…


Html5キャンバス要素をWebページに追加する方法

Html5-キャンバス...

  • Html5要素です。
  • 最新のブラウザ（Internet Explorer 9以降）でサポートされています。
  • デフォルトで透明な可視要素です
  • デフォルトの幅は300px、デフォルトの高さは150pxです。
  • すべてのコンテンツをプログラムでキャンバスに追加する必要があるため、JavaScriptが必要です。

例：Html5マークアップとJavaScriptの両方を使用してHtml5-Canvas要素を作成する： 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvasHtml5{border:1px solid red; }
    #canvasJavascript{border:1px solid blue; }
</style>
<script>
window.onload=(function(){

    // add a canvas element using javascript
    var canvas=document.createElement('canvas');
    canvas.id='canvasJavascript'
    document.body.appendChild(canvas);

}); // end $(function(){});
</script>
</head>
<body>

    <!-- add a canvas element using html -->
    <canvas id='canvasHtml5'></canvas>

</body>
</html>

キャンバスのサイズと解像度

キャンバスのサイズは、ページ上で占める領域で、CSSの幅と高さのプロパティによって定義されます。 

canvas {
   width : 1000px;
   height : 1000px;
}

キャンバス解像度は、それに含まれるピクセル数を定義します。解像度は、キャンバス要素の幅と高さのプロパティを設定することによって設定されます。指定されていない場合、キャンバスのデフォルトは300 x 150ピクセルになります。

次のキャンバスは上記のCSSサイズを使用しますが、 widthとheightが指定されていないため解像度は300 x 150になります。 

<canvas id="my-canvas"></canvas>

これにより、各画素が不均一に引き伸ばされることになる。ピクセルアスペクトは1：2です。キャンバスが引き伸ばされると、ブラウザは双線形フィルタリングを使用します。これは、伸びているピクセルをぼかす効果があります。

キャンバスを使用するときの最良の結果を得るには、キャンバス解像度が表示サイズに一致するようにしてください。

上記のCSSスタイルから表示サイズに合わせて、スタイルと同じピクセル数に設定heightれたwidthとheightさのキャンバスを追加します。 

<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>

オフスクリーンキャンバス

キャンバスを使って作業する場合、イントラピクセルデータを保持するキャンバスが必要になることがよくあります。オフスクリーンキャンバスを作成して2Dコンテキストを取得するのは簡単です。オフスクリーンキャンバスでは、レンダリングに使用可能なグラフィックハードウェアも使用されます。

次のコードは単純にキャンバスを作成し、青のピクセルで塗りつぶします。 

function createCanvas(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    return canvas;
}

var myCanvas = createCanvas(256,256); // create a small canvas 256 by 256 pixels
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,256,256);

多くの場合、オフスクリーンキャンバスは多くのタスクに使用され、多くのキャンバスを使用できます。キャンバスの使用を簡単にするために、キャンバスコンテキストをキャンバスにアタッチすることができます。 

function createCanvasCTX(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    canvas.ctx = canvas.getContext("2d");
    return canvas;
}
var myCanvas = createCanvasCTX(256,256); // create a small canvas 256 by 256 pixels
myCanvas.ctx.fillStyle = "blue";
myCanvas.ctx.fillRect(0,0,256,256);

キャンバス上でマウスの位置を検出する

この例では、キャンバスを基準にしてマウスの位置を取得する方法を示します。その結果、 (0,0)はHTML5 Canvasの左上隅になります。 e.clientXとe.clientYは、クライアントのXとYからキャンバスのleftとright位置を引くキャンバスの上端に基づいてこれを変更するために、ドキュメントの上端に対するマウスの位置を取得します。 

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";

canvas.addEventListener("mousemove", function(e) { 
    var cRect = canvas.getBoundingClientRect();        // Gets CSS pos, and width/height
    var canvasX = Math.round(e.clientX - cRect.left);  // Subtract the 'left' of the canvas 
    var canvasY = Math.round(e.clientY - cRect.top);   // from the X/Y positions to make  
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // (0,0) the top left of the canvas
    ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});

実行可能な例

Math.roundの使用は、キャンバスの境界矩形が整数位置を持たない場合があるため、 x,y位置が整数であることを保証するためです。

こんにちは世界

HTML 

<canvas id="canvas" width=300 height=100 style="background-color:#808080;">
</canvas>

Javascript 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "34px serif";
ctx.textAlign = "center";
ctx.textBaseline="middle"; 
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World",150,50);

結果

HTML5キャンバスを使用したHello World

Html5 Canvas Capabilities＆Usesへのインデックス

キャンバスの機能

キャンバスを使用すると、プログラムでWebページに描画できます。

キャンバスの描画は、広範なスタイルにすることができます：

キャンバスの使用

図面は、キャンバス上のどこにでも組み合わせて配置することができます。そのため、以下を作成することができます。

  • アプリケーションのペイント/スケッチ、
  • 高速ペースのインタラクティブゲーム、
  • チャート、グラフ、
  • Photoshopのようなイメージング、
  • Flashのような広告とFlashyのWebコンテンツ。

Canvasでは、イメージの赤、緑、青、およびアルファのコンポーネントカラーを操作できます。これにより、キャンバスはPhotoshopに似た結果で画像を操作できます。

  • 画像の任意の部分をピクセルレベルで再描画します（HSLを使用する場合は、重要なライティングと彩度を保持したままイメージの色を変更することもできるため、結果は誰かがイメージ上の塗料を塗ったように見えません）。
  • 画像内の人物/アイテムの周りの背景を「ノックアウト」し、
  • （例えば、ユーザーがクリックした花びらの色を緑色から黄色に変更する - クリックした花びらだけを変更する）
  • パースペクティブはワープする（例えば、カップのカーブの周りにイメージをラップする）か、
  • コンテンツ（例えば、顔認識）の画像を検査し、
  • イメージに関する質問に答える：私の駐車場のイメージに駐車場がありますか？
  • 標準イメージフィルタ（グレースケール、セピアなど）を適用する
  • あなたが夢を見ることができるエキゾチックな画像フィルタを適用する（Sobel Edge Detection）、
  • 画像を結合する。親愛なるおばあちゃんが家族同窓会に行けなかった場合は、彼女を再会のイメージに「Photoshop」してください。 Cousin Philが好きではない - ちょうど "photoshop彼を出して、
  • ビデオを再生する/ビデオからフレームを取得し、
  • キャンバスの内容を.jpg形式でエクスポートする| .pngイメージ（必要に応じてイメージをトリミングまたは注釈付けし、結果を新しいイメージとしてエクスポートすることもできます）。

キャンバス図面の移動と編集について（例えば、アクションゲームを作成するため）：

  • キャンバス上に何かが描画された後、既存の図面を移動または編集することはできません。キャンバスの図面が移動可能であるというこの一般的な誤解は、次のことを明確にする価値があります 。 既存のキャンバスの図面を編集または移動することはできません！
  • キャンバスはとても素早く描画されます。キャンバスは何百もの画像、テキスト、線、曲線を数秒で描画できます。 GPUを使用して描画を高速化します。
  • キャンバスは、何かを素早く繰り返し描き、それを新しい位置に再描画することによって、動きの錯覚を作り出します。テレビのように、この一定の再描画は目に動きの錯覚を与えます。

回転する

2Dコンテキストのrotate(r)メソッドは、キャンバスを、原点の周りの指定された量rのラジアンだけ回転させます。

HTML 

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>

<button type="button" onclick="rotate_ctx();">Rotate context</button>

Javascript 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World", ox, oy);

rotate_ctx = function() {
  // translate so that the origin is now (ox, oy) the center of the canvas
  ctx.translate(ox, oy);
  // convert degrees to radians with radians = (Math.PI/180)*degrees. 
  ctx.rotate((Math.PI / 180) * 15);
  ctx.fillText("Hello World", 0, 0);
  // translate back
  ctx.translate(-ox, -oy);
};

JSfiddleのライブデモ

キャンバスを画像ファイルに保存する

キャンバスのイメージデータのデータURIを返す、 canvas.toDataURL()メソッドを使用してイメージファイルにキャンバスを保存できます。

このメソッドは2つのオプションのパラメータcanvas.toDataURL(type, encoderOptions)を取ることができます： typeはイメージフォーマットです（省略された場合はimage/png ）。 encoderOptionsは、画質を示す0と1の間の数値です（デフォルトは0.92です）。

ここでキャンバスを描画し、キャンバスのデータURIを「Download to myImage.jpg」リンクに添付します。

HTML 

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<p></p>
<a id="download" download="myImage.jpg" href="" onclick="download_img(this);">Download to myImage.jpg</a>

Javascript 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox / 2, oy / 2, ox, oy);

download_img = function(el) {
  // get image URI from canvas object
  var imageURI = canvas.toDataURL("image/jpg");
  el.href = imageURI;
};

JSfiddleのライブデモ



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow