html画三个重叠的矩形,html5 实现两个矩形的叠加

Canvas Primer - Example: Drawing shadows

window.addEventListener('load', function () {

//得到canvas，并检测是否支持canvas

var elem = document.getElementById('myCanvas');

if (!elem || !elem.getContext) {

return;

}

// 得到可以画图的上下文context

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

if (!context) {

return;

}

// 分别设置阴影的偏移坐标，阴影的虚化程度，阴影的颜色，图形的填充颜色，以及绘制图形。

context.shadowOffsetX = 10;

context.shadowOffsetY = 10;

context.shadowBlur = 4;

context.shadowColor = 'red';

context.fillStyle = '#00f';

context.fillRect(20, 20, 150, 100);

}, false);

Your browser does not have

support for Canvas.