HTML => キャンバス

パラメーター

属性	説明
高さ	キャンバスの高さを指定します。
幅	キャンバスの幅を指定します。

備考

このタグは、Internet Explorerのバージョンが9未満の場合に互換性がありません。ブラウザの互換性については、 caniuse.comを確認してください。
canvasはグラフィックスのコンテナに過ぎず、グラフィックスの実際の描画はJavaScriptによって行われます。

基本的な例

canvas要素はHTML5でグラフィックを描画するために導入されました。

<canvas id="myCanvas">
   Cannot display graphic. Canvas is not supported by your browser (IE<9)
</canvas>

上の例では、300×150ピクセルの透明なHTML <canvas>要素が作成されます。

キャンバス要素を使用して、形状、グラフ、画像操作、 JavaScriptなどの魅力的なゲームの作成などの素晴らしいものを描画できます 。
canvasの2D 描画可能レイヤサーフェスオブジェクトは、 CanvasRenderingContext2Dと呼ばれCanvasRenderingContext2D 。または.getContext("2d")メソッドを使用して.getContext("2d")からHTMLCanvasElementします。

var ctx = document.getElementById("myCanvas").getContext("2d");
// now we can refer to the canvas's 2D layer context using `ctx`

ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // x, y, width, height

ctx.fillStyle = "#000";
ctx.fillText("My red canvas with some black text", 24, 32); // text, x, y

jsFiddleの例

2つの長方形を

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Draw two rectangles on the canvas</title>
    <style>
      canvas{
          border:1px solid gray;
      }
    </style>
    <script async>
      window.onload = init; // call init() once the window is completely loaded
      function init(){
        // #1 - get reference to <canvas> element
        var canvas = document.querySelector('canvas');
        
        // #2 - get reference to the drawing context and drawing API
        var ctx = canvas.getContext('2d');

        // #3 - all fill operations are now in red
        ctx.fillStyle = 'red'; 

        // #4 - fill a 100x100 rectangle at x=0,y=0
        ctx.fillRect(0,0,100,100);
        
        // #5 - all fill operations are now in green
        ctx.fillStyle = 'green'; 
        
        // #6 - fill a 50x50 rectangle at x=25,y=25
        ctx.fillRect(25,25,50,50);
        
      }
      </script>
</head>
<body>
  <canvas width=300 height=200>Your browser does not support canvas.</canvas>
</body>
</html>

この例は次のようになります。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

HTML
キャンバス

サーチ…

パラメーター

備考

基本的な例

2つの長方形を