Canvas阴影的绘制

接口

context.shadowColor // 颜色

context.shadowOffsetX // X 位移

context.shadowOffsetY // Y 位移

context.shadowBlur // 模糊程度

 

 

示例

 

代码

var canvas = document.getElementById('canvas')
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
context.fillStyle = "#058"

context.shadowColor = "gray";   // 颜色
context.shadowOffsetX = 20;  // X 位移 
context.shadowOffsetY = 20;  // Y 位移
context.shadowBlur = 5;   // 模糊

context.fillRect(200, 200, 400, 400);

 

效果