html5绘制随机五角星_HTML5 给图形绘制阴影(绘制五角星示例)

几个属性

shadowOffsetX:阴影的横向位移量。

shadowOffsetY:阴影的纵向位移量。

shadowColor:阴影的颜色。

shadowBlur:阴影的模糊范围。

属性说明

shadowOffsetX，shadowOffsetY默认值为零

shadowBlur属性是可选的。如果你不希望阴影的边缘太清晰，需要将阴影的边缘模糊化时使用该属性。设定该属性值时必须设定为比零大的数字，否则将被忽略。一般设定在0-10之间。

例：绘制五角星

给图形绘制阴影

function draw(id) {

var canvas = document.getElementById(id);

if(canvas == null)

return false;

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

context.fillStyle = "#eeeeff";

context.fillRect(0,0,400,300);

context.shadowOffsetX = 10;

context.shadowOffsetY = 10;

context.shadowColor = 'rgba(100,100,100,0.5)';

context.shadowBlur = 7.5;

//图形绘制

context.translate(0,0);

for (var i = 0; i < 3; i++) {

context.translate(60,50);//偏的方向

creat5Star(context);

context.fill();

};

}

function creat5Star(context) {

var n = 0;

var dx = 0;

var dy = 0;

var s = 50;

//创建路径

context.beginPath();

context.fillStyle = 'rgba(255,0,0,0.5)';

var x = Math.sin(0);

var y = Math.cos(0);

var dig = Math.PI/5*4;//改变形状

for (var i = 0; i < 5; i++) {

var x = Math.sin(i*dig);

var y = Math.cos(i*dig);

context.lineTo(dx+x*s,dy+y*s);

};

context.closePath();

}

canvas元素示例