Category: Canvas

Canvasで遊ぼう

%e7%84%a1%e9%a1%8c

  ctx.shadowColor = "#ccc";
  ctx.shadowOffsetX = 5;
  ctx.shadowOffsetY = 5;
  ctx.shadowBlur = 5;

  ctx.globalAlpha = 0.5;

  ctx.fillRect(0, 0, 100, 100);

図形の変形

  ctx.scale(0.8,0.8);  
  ctx.rotate(30/180*Math.PI);
  ctx.translate(100, 10);

  ctx.fillRect(0, 0, 100, 100);

stroke

ctx.beginPath();
  ctx.moveTo(20, 20);
  ctx.lineTo(120,20);
  ctx.lineTo(120,120);
  ctx.stroke();

円形・曲線:round,butt,square

ctx.beginPath();
  ctx.arc(100,100,50,10/180*Math.PI,210/180*Math.PI);
  ctx.lineWidth = 15;
  ctx.lineCap = "round";
  ctx.stroke();

テキスト描画

  ctx.font = 'bold 20px Verdana';
  ctx.textAlign = 'left';
  ctx.fillStyle = 'red';

  ctx.fillText('Google', 20, 20, 40);
  ctx.strokeText('Google', 20, 120, 200);

画像表示

  var img = new Image();
  img.src = 'baby.jpg';
  img.onload = function(){
    ctx.drawImage(img, 10, 10);
  }

背景パターン

  var img = new Image();
  img.src = 'google.png';
  im.onload = function(){
    var patter = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = pattern;
    ctx.fillRect(20, 20, 100, 100);
  }

設定の保存、復元

  ctx.fillStyle = "yellow";
  ctx.save();

  ctx.fillRect(0, 0, 50, 50);

  ctx.fillStyle= "blue";
  ctx.fillRect(100, 0, 50, 50);

  ctx.restore();
  ctx.fillRect(200, 0, 50, 50);

window.onload = function(){
  draw();
}
function draw(){
  var canvas = document.getElementById('mycanvas');
  if (!canvas || !canvas.getContext)return false;
  var ctx = canvas.getContext('2d');

  ctx.globalAlpha = 0.5;

  for (var i = 0; i < 100; i++){
    var x = Math.floor(Math.random() * 400);
    var y = Math.floor(Math.random() * 200);
    var r = Math.floor(Math.random() * 200);

    ctx.fillStyle = "rgb("+rgb()+","+rgb()+","+rgb()+")";
    ctx.beginPath();
    ctx.arc(x,y,r,0,2*Math.PI);
    ctx.stroke();
    ctx.fill();
  }

  function rgb(){
    return Math.floor(Math.random() * 255);
  }
}

Canvas

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Canvas</title>
  </head>
  <body>
    <h1>Canvas</h1>
    <canvas id="mycanvas" width="800" height="800">
    対応ブラウザを使用ください。</canvas>
    <p>
    </p>
  <script src="myscript.js"></script>
  </body>
</html>

window.onload = function(){
  draw();
}
function draw(){
  var canvas = document.getElementById('mycanvas');
  if (!canvas || !canvas.getContext)return false;
  var ctx = canvas.getContext('2d');

  //ctx.strokeRect(50, 10, 50, 150);
  ctx.fillRect(10, 10, 50, 50);
  ctx.clearRect(15, 15, 20, 20);
}

線の塗りやスタイル

  ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
  ctx.lineWidth = 15;
  ctx.lineJoin = "bevel";//"round";

  ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
  ctx.strokeRect(10, 10, 50, 50);
  ctx.fillRect(100, 10, 50, 50);

%e7%84%a1%e9%a1%8c

  var g = ctx.createLinearGradient(0, 0, 0, 100);
  g.addColorStop(0.0, "red");
  g.addColorStop(0.5, "yellow");
  g.addColorStop(1.0, "blue");
  ctx.fillStyle = g;

  ctx.fillRect(0, 0, 100, 100);

円形
var g = ctx.createRadialGradient(50, 50, 0, 50, 50, 80);