代码描述:canvas绘制 立体圆环。canvas 绘制立体圆环
分享一个代码实例,它实现了绘制立体圆环的效果。 代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>canvas绘制立体圆环</title> <style> canvas { border:2px dotted #ccc; } </style> </head> <body> <canvas id="canvas" width="550" height="450"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); function drawTwoArcs() { context.beginPath(); context.arc(300, 190, 150, 0, Math.PI * 2, false); context.arc(300, 190, 100, 0, Math.PI * 2, true); context.fill(); } function draw() { context.shadowColor = "rgba(0,0,0,0.8)"; context.shadowOffsetX = 12; context.shadowOffsetY = 12; context.shadowBlur = 15; drawTwoArcs(); } context.fillStyle = "rgba(100,140,230,0.5)"; draw(); </script> </body> </html>
如果单独绘制任何一个圆环并填充,那么效果都是完全填充。 但是为什么这里能够实现圆环效果,下面做一下介绍。 fill()方法是有参数的,如果不填写,那么默认值是"nonzero",这是一个填充规则。 明白这个规则,那么再利用阴影就可以实现要求了。
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能