实例讲解使用HTML5 Canvas绘制阴影效果的方法

window.onload = function() { var canvas = document.getElementById("text_canvas");

console.log(canvas.parentNode.clientWidth); canvas.width = canvas.parentNode.clientWidth;

canvas.height = canvas.parentNode.clientHeight;

if (!canvas.getContext) { console.log("Canvas not supported. Please install a HTML5 compatible browser.");

return; }

var context = canvas.getContext('2d');

// section one - shadow and blur context.fillStyle="black";

context.fillRect(0, 0, canvas.width, canvas.height/4); context.font = '60pt Calibri';

context.shadowColor = "white";

context.shadowOffsetX = 0; context.shadowOffsetY = 0;

context.shadowBlur = 20; context.fillText("Blur Canvas", 40, 80);