Q
绘制在画布光线
2
A
回答
5
http://jsbin.com/uhuwud/1/edit
(function(){
var can = document.getElementById("lightray"),
ctx = can.getContext('2d'),
wid = can.width,
hei = can.height,
ang = -90 * Math.PI/180,
spn = 80 * Math.PI/180,
ctr = {x: 200, y:200},
rad = 200,
grd = ctx.createRadialGradient(ctr.x, ctr.y, 0, ctr.x, ctr.y, rad);
grd.addColorStop(0, 'rgba(0,200,255,.25)');
grd.addColorStop(0.75, 'rgba(0,0,0,0.25)');
grd.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = grd;
(function draw(){
ctx.clearRect(0,0,wid,hei);
ang = Math.sin(new Date()/1000) * Math.PI/2;
spn = (Math.abs(Math.sin(new Date()/1000/3)) * 120 + 30) * Math.PI/180;
// The below code is the pertinent part
// the concept is that I'm drawing a radial gradient in an arc, and decreasing the span
// of the arc some number of times. This will create the side-to-side fading.
for (var i = 2; i < 10; i+=0.1){
ctx.beginPath();
ctx.moveTo(ctr.x,ctr.y);
ctx.arc(ctr.x, ctr.y, rad, ang - spn/i, ang + spn/i, false);
ctx.closePath();
ctx.fill();
}
// the above code
webkitRequestAnimationFrame(draw);
})();
})();
相关问题
- 1. 画布,绘制线段
- 2. 用画布绘制线条
- 3. HTML5画布绘制自定义光标
- 4. 在QML画布上绘制线段
- 5. 使用WPF在画布上绘制线
- 6. 在Android画布中绘制2D曲线?
- 7. 在画布上绘制曲线路径?
- 8. 画布在绘制后更改线宽
- 9. 在HTML5画布上绘制虚线?
- 10. HTML5画布绘制线在标尺
- 11. 在画布上绘制虚线
- 12. 绘图画布线
- 13. 如何在画布上绘制画布
- 14. HTML画布绘制清晰的线条
- 15. HTML5画布绘制多彩线
- 16. 更改线宽绘制到画布(gwt)
- 17. 绘制单个像素线HTML5画布
- 18. 更改绘制线的画布
- 19. 用画布绘制流畅的线条
- 20. Android SurfaceView使用线程绘制画布
- 21. 在画布上绘制ArcTo
- 22. 在画布上绘制EditText
- 23. 绘制在画布上
- 24. 在画布上绘制
- 25. 在子画布上绘制
- 26. 在Scala.js上绘制画布
- 27. 在画布上绘制SVG
- 28. HTML5画布绘制
- 29. 绘制到画布
- 30. Matplotlib画布绘制
我只看到你的照片了一堆非英语张贴... – luiges90
或者我可以改变图像颜色? – Arti