fillStyle径向渐变

<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style></head><body><div><canvas id = "canvas" width = "800px" height = "800px"></canvas></div> <script type = "text/javascript" >
window.οnlοad=function(){
var context = document.getElementById('canvas').getContext('2d')
/* fillStyle 镜像渐变
第一步:
var radialGradient = context.createRadialGradient(300,300,0,300,300,50);
参数1:第一个圆圆心的x坐标
参数2:第一个圆圆心的y坐标
参数3:第一个圆的半径

参数4:第二个圆圆心的x坐标
参数5:第二个圆圆心的y坐标
参数6:第二个圆的半径
第二步:
linearGradient.addColorStop(0,'#fff');
linearGradient.addColorStop(0.25,'yellow');
linearGradient.addColorStop(0.50,'green');
linearGradient.addColorStop(0.60,'red');
参数1:位置的百分比
参数2:渐变的颜色
第三步:
context.fillStyle = linearGradient;
context.fillRect(0,0,800,800);
*/
var radialGradient = context.createRadialGradient(400,400,100,400,400,500);
radialGradient.addColorStop(0,'#fff');
radialGradient.addColorStop(0.25,'yellow');
radialGradient.addColorStop(0.50,'green');
radialGradient.addColorStop(0.60,'red');
radialGradient.addColorStop(0.75,'blue');
radialGradient.addColorStop(1.0,'black');
context.fillStyle = radialGradient;
context.fillRect(0,0,800,800);
}
</script> </body> </html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 HTML5 中,可以使用 Canvas API 绘制径向渐变。Canvas API 提供了 createRadialGradient() 方法来创建径向渐变对象。 createRadialGradient() 方法的语法如下: ``` context.createRadialGradient(x0, y0, r0, x1, y1, r1); ``` 其中,(x0, y0) 表示渐变的起始点,r0 表示起始点的半径,(x1, y1) 表示渐变的结束点,r1 表示结束点的半径。 接下来,可以使用 addColorStop() 方法来为渐变对象添加颜色。addColorStop() 方法的语法如下: ``` gradient.addColorStop(stop, color); ``` 其中,stop 参数表示颜色的位置,范围在 0.0(起始位置)和 1.0(结束位置)之间,color 参数表示颜色值。 下面是一个绘制径向渐变的例子: ```html <canvas id="myCanvas" width="200" height="200"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 创建径向渐变对象 var gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100); // 添加颜色 gradient.addColorStop(0, "red"); gradient.addColorStop(1, "white"); // 绘制圆形 ctx.beginPath(); ctx.arc(100, 100, 100, 0, 2 * Math.PI); ctx.fillStyle = gradient; ctx.fill(); </script> ``` 这个例子中,先创建了一个半径为 50 到 100 的径向渐变对象,起始点和结束点都在圆心位置。然后,使用 addColorStop() 方法为渐变对象添加了两个颜色。最后,使用 fillStyle 属性将渐变对象设置为圆形的填充样式,绘制了一个填充有径向渐变的圆形。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值