HTML5のcanvas要素 - 影を設定する
影を設定する属性
- shadowBlur
- shadowColor
- shadowOffsetX
- 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>