タグを使用してサイズを変更(2)

6244 ワード
canvas image_format Resizing テキストリンク
リンクりんく:基本用法of canvasきほんようさof canvas

A skeleton template

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <script type="application/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, 50, 50);

        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
        ctx.fillRect(30, 30, 50, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>
  • <body>のpage loadイベント時draw()実行.
    • 選択
  • <canvas>、実行getContext('2d')レンダリングコンテキストにアクセスします.
    • 描画する画像のスタイル(色)を決定します.
  • ・fillStylex座標、y座標、width、heightを指定します.
    • [白俊2982]国王の訪問
    iOS画像フィレット処理