liguofeng29’s blog

個人勉強用ブログだっす。

HTML5のcanvas要素 - 影を設定する

影を設定する属性

  1. shadowBlur
  2. shadowColor
  3. shadowOffsetX
  4. shadowOffsetY
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> 影を設定する</title>
</head>
<body>
<h2> 影を設定するサンプル </h2>
<canvas id="canvas" width="500" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
   // canvas要素取得
   var canvas = document.getElementById('canvas');
   // CanvasRenderingContext2D取得
   var ctx = canvas.getContext('2d');
   
   // 影の透明度??を設定する
   ctx.shadowBlur = 5.6;
   // 影を色
   ctx.shadowColor = "#222";
   // 影をX.Y偏移
   ctx.shadowOffsetX = 10;
   ctx.shadowOffsetY = -6;
   
   // テキストを描く
   ctx.fillStyle = '#00f';
   ctx.font='bold 45px serif';
   ctx.textBaseline = 'top';
   ctx.fillText('影付きテキスト1', 0, 0);
   ctx.strokeStyle = '#f0f';
   ctx.font='bold 45px serif';
   ctx.strokeText('影付きテキスト2', 0, 50);
   
   // 四角を描く
   ctx.fillRect(20 , 150 , 180 , 80);
   ctx.lineWidth = 8;
   ctx.strokeRect(300 , 150 , 180 , 80);
</script>
</body>
</html>

f:id:liguofeng29:20160123222327p:plain