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