HTML5canvas基本绘图之绘制阴影效果

<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制阴影方法，感兴趣的小伙伴们可以参考一下

JavaScript Code 复制内容到剪贴板

var canvas = document.getElementById( "canvas" );

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

context.beginPath();

//设置是个顶点的坐标，根据顶点制定路径

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

context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,

-Math.sin((18+i*72)/180*Math.PI)*200+200);

context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,

-Math.sin((54+i*72)/180*Math.PI)*80+200);

}

context.closePath();

//设置边框样式以及填充颜色

context.lineWidth= "3" ;

context.fillStyle = "#F6F152" ;

context.strokeStyle = "#F5270B" ;

context.shadowColor = "#F7F2B4" ;

context.shadowOffsetX = 30;

context.shadowOffsetY = 30;

context.shadowBlur = 2;

context.fill();

context.stroke();

效果如下：

以上就是HTML5 canvas基本绘图之绘制阴影效果的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于HTML5canvas基本绘图之绘制阴影效果的详细内容...