canvas光晕

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             function draw(id){
 8                 var convas = document.getElementById(id);
 9                 if(canvas == null){
10                     return false;
11                 }
12                 var context = canvas.getContext('2d');
13                 context.fillStyle = '#eeeeff';
14                 context.fillRect(0,0,400,300);
15                 for(var i=0;i<10;i++){
16                     context.beginPath();
17                     context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
18                     context.closePath();
19                     context.fillStyle = 'rgba(255,0,0,0.25)';
20                     context.fill();
21                 }
22             }
23         </script>
24     </head>
25     <body onload="draw('canvas');">
26         <canvas id="canvas" width="400" height="300"></canvas>
27     </body>
28 </html>

 

转载于:https://www.cnblogs.com/staven/p/4764216.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Canvas 中实现效果,可以使用 Canvas 的 `globalCompositeOperation` 属性和径向渐变(Radial Gradient)来实现。 具体实现步骤如下: 1. 创建一个径向渐变对象,作为的底色,可以使用 `createRadialGradient()` 方法。 ```javascript var gradient = ctx.createRadialGradient(x, y, 0, x, y, radius); gradient.addColorStop(0, 'rgba(255, 255, 255, 0.5)'); gradient.addColorStop(1, 'rgba(255, 255, 255, 0)'); ``` 其中,`x` 和 `y` 是渐变的圆心坐标,`radius` 是渐变的半径,`addColorStop()` 方法用于设置渐变的颜色值和位置。 2. 将 `globalCompositeOperation` 属性设置为 `'lighter'`,表示将新绘制的图形与原有的图形混合。 ```javascript ctx.globalCompositeOperation = 'lighter'; ``` 3. 使用 `fillStyle` 属性将渐变对象绘制到 Canvas 上。 ```javascript ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); ``` 完整的实现代码如下: ```javascript var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 创建径向渐变对象 var gradient = ctx.createRadialGradient(x, y, 0, x, y, radius); gradient.addColorStop(0, 'rgba(255, 255, 255, 0.5)'); gradient.addColorStop(1, 'rgba(255, 255, 255, 0)'); // 设置 globalCompositeOperation 属性 ctx.globalCompositeOperation = 'lighter'; // 绘制径向渐变对象 ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); ``` 其中,`x`、`y` 和 `radius` 分别表示的位置和半径,可以根据实际需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值