Canvas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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>
1
2
3
4
5
6
7
8
9
10
11
12
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);
}

線の塗りやスタイル

1
2
3
4
5
6
7
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

1
2
3
4
5
6
7
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);