首页 > web前端 > html/css/css3 > html5 canvas绘图之径向渐变createRadialGradient,addColorStop实例
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
06-15

html5 canvas绘图之径向渐变createRadialGradient,addColorStop实例

径向渐变(发散)var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)径向渐变(发散)颜色rg.addColorStop(offset,color)
xStart:发散开始圆心x坐标
yStart:发散开始圆心y坐标
radiusStart:发散开始圆的半径
xEnd:发散结束圆心的x坐标
yEnd:发散结束圆心的y坐标
radiusEnd:发散结束圆的半径
offset:设定的颜色离渐变结束点的偏移量(0~1)
color:绘制时要使用的颜色 

<script type="text/javascript">
var canvas = document.getElementById("demo-canvas");
if (canvas.getContext){
    var context = canvas.getContext("2d");   
	 
            var context = canvas.getContext('2d');
            var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100);
            g1.addColorStop(0.1, 'rgb(255,0,0)');  
            g1.addColorStop(1, 'rgb(50,0,0)');
            context.fillStyle = g1;
            context.beginPath();
            context.arc(200, 150, 100, 0, Math.PI * 2, true);
            context.closePath();
            context.fill();
	
            var op = context.createRadialGradient(50, 300, 10, 400, 300, 80);
            op.addColorStop(0.1, 'rgb(255,0,0)');
            op.addColorStop(0.5, 'rgb(0,255,0)');
            op.addColorStop(1, 'rgb(0,0,255)');
            context.fillStyle = op;
            context.fillRect(0, 0, 330, 500);  

}
</script>

径向渐变

最后效果

进入html5 canvas绘图详细教程

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*