8
A
回答
20
您要使用的ctx.createRadialGradient()
方法。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 100,
y = 75,
// Radii of the white glow.
innerRadius = 5,
outerRadius = 70,
// Radius of the entire circle.
radius = 60;
var gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'blue');
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fillStyle = gradient;
ctx.fill();
+0
这里是基于接受的回答一个很好的粒子:http://jsfiddle.net/sA6Wc/422/ – 2014-12-07 05:23:04
相关问题
- 1. 圆形轨迹在画布上淡出
- 2. 淡出文字效果在HTML5画布
- 3. 如何使用Core Graphics/iPhone绘制渐变线(淡入/淡出)?
- 4. 画布渐变
- 5. 用几种渐变颜色在画布上画一个圆圈
- 6. 如何清除HTML5画布中的圆弧或圆圈?
- 7. iPhone OpenGL - 如何渐变淡出质感?
- 8. 线性渐变画笔淡入淡出WPF
- 9. 动画中的画布渐变
- 10. jquery淡入淡出渐变背景
- 11. 画布绘制用线性渐变填充圆角矩形
- 12. Cocos2d:如何使绘制的圆做缩放或淡出动画
- 13. 如何使这个脚本变成淡入淡出的动画
- 14. 如何用画布逐渐绘制圆角矩形
- 15. Delphi 7在画布上绘制圆圈的渐变部分
- 16. 圆锥渐变圆
- 17. 形状位置和渐变位置在HTML5画布中如何相关?
- 18. 如何在画布上绘制具有径向渐变的圆形?
- 19. 如何在Android中在画布上绘制平滑/渐变的渐变
- 20. 如何实现在动画中淡入淡出的圆形图像?
- 21. 如何使用TweenJS动画EaselJS渐变?
- 22. 如何为画布渲染使用栏选取渐变颜色?
- 23. 渐渐淡出图片
- 24. 画布淡出粒子
- 25. 如何让HTML5画布变为全屏?
- 26. HTML5画布集z-index
- 27. HTML5 - 画布径向渐变形状边缘
- 28. HTML5画布:渐变和strokeStyle让我感到困惑
- 29. HTML5画布线性渐变不工作对我来说
- 30. HTML5画布圆弧代码更正
我的意思是像一个径向渐变... – user2336726 2013-05-11 06:14:06