影を付ける-HTML5編

このページでは、画像や文字に影（シャドウ）を付ける方法について解説します。

影の設定

最初に影の設定をする方法を見ておきましょう。

context.shadowColor = 色: 影の色を指定します。
context.shadowBlur = 数値: 影のぼかし具合を指定します。数値が大きいほどぼかしが強くなります。
context.shadowOffsetX = 数値: 影の横方向のずれ具合を指定します。
context.shadowOffsetY = 数値: 影の縦方向のずれ具合を指定します。

上記の４種類の値を指定します。

文字にシャドウ効果を付ける

まずは文字に影を付けてみます。

<canvas id="cv1" width="360" height="240"></canvas>
<script>
  var ctx = document.getElementById("cv1").getContext("2d");

  ctx.font = "italic 64px Arial";
  ctx.fillStyle = "green";
  
  ctx.shadowColor = "red";  //赤色の影を付ける
  ctx.shadowBlur  = 0;      //ぼかしを０にする
  ctx.shadowOffsetX = 3;    //横に3pxずらす
  ctx.shadowOffsetY = 1;    //縦に1pxずらす
   
  ctx.fillText("JavaScript",10,140);
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

ぼかしを０にすると、サンプルのようにくっきりした影が付きます。

図形にシャドウ効果を付ける

続いて、図形に影を付けてみます。

<canvas id="cv2" width="360" height="240"></canvas>
<script>
  var ctx = document.getElementById("cv2").getContext("2d");

  ctx.fillStyle = "aqua";
  
  ctx.shadowColor = "blue";  //青色の影を付ける
  ctx.shadowBlur  = 5;       //ぼかしを５にする
  ctx.shadowOffsetX = 10;    //横に10pxずらす
  ctx.shadowOffsetY = 10;    //縦に10pxずらす
   
  ctx.beginPath();
  ctx.arc(180,120,80,0,Math.PI*2,true);
  ctx.fill();
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

円の背後に影を付けてみました。

画像にシャドウ効果を付ける

最後は画像に影を付けてみます。

<head>
<script>
  var img = new Image();
  img.src = "img/dog.jpg";
</script>
</head>

<body onload="draw()">

<canvas id="cv3" width="360" height="240"></canvas>
<script>
function draw(){
  var ctx = document.getElementById("cv3").getContext("2d");

  ctx.shadowColor = "gray";  //灰色の影を付ける
  ctx.shadowBlur  = 10;      //ぼかしを10にする
  ctx.shadowOffsetX = 20;    //横に20pxずらす
  ctx.shadowOffsetY = 15;    //縦に15pxずらす

  ctx.drawImage(img,10,10,240,160);
}   
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

写真の背後にぼやけた影ができ、少し浮いたような効果を出すことができました。

前へ次へ