HTML 5:Canvasの基本的な使い方

4237 ワード

canvas

1.ラベル

<canvas id="tutorial" width="150" height="150"></canvas>

canvas：                ，   width 300 height 150

 2   ：

    width ：

    height：

id：  html

2.レンダーコンテキスト(Rendering Context)<canvas>の初期化は空白であり、上でスクリプトグラフを使用するにはまずそのレンダリングコンテキスト(rendering context)が必要であり、canvas要素オブジェクトのgetContextメソッドで取得することができ、同時にいくつかのグラフ用の関数も得られる.getContext() は、そのタイプを記述するための値をパラメータとして受け入れる.

//  dom    canvas

var canvas = document.getElementById('tutorial');

//  canvas      2d

var ctx = canvas.getContext('2d');

3.簡単な例

<html>

 <head>

  <script type="application/x-javascript">

    function draw() {

      var canvas = document.getElementById("canvas");

      if (canvas.getContext) {

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



        ctx.fillStyle = "rgb(200,0,0)";

        ctx.fillRect (10, 10, 55, 50);



        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

        ctx.fillRect (30, 30, 55, 50);

      }

    }

  </script>

 </head>

 <body onload="draw();">

   <canvas id="canvas" width="150" height="150"></canvas>

 </body>

</html>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

HTML5 WebSocket+Asp.Netインスタンス4-ユーザーID、バックグラウンドプッシュ

Webrtcソースの取得とコンパイル