canvas画布画阴影透明的小球也挺漂亮

马黑黑

马黑黑

加林森 发表于 2022-8-24 07:22
还挺漂亮的。

不算难看

马黑黑

代码：

1. <style>
   
2.         #canv { margin: auto; display: block; position: relative; border: 1px solid; }
   
3. </style>
   
4. 
   
5. <canvas id="canv" width="600" height="400"></canvas>
   
6. 
   
7. <script>
   
8. 
   
9. let ctx = canv.getContext('2d');
   
10. let num = (end,start) => Math.floor(Math.random() * (end - start) + start);
    
11. 
    
12. (function draw() {
    
13.         ctx.clearRect(0, 0, canv.width, canv.height);
    
14.         ctx.shadowOffsetX = 4;
    
15.         ctx.shadowOffsetY = 4;
    
16.         ctx.shadowBlur = 8;
    
17.         ctx.shadowColor = 'black';
    
18.         for(j =0; j < 100; j ++) {
    
19.                 ctx.fillStyle = 'hsla(' + num(0,360) + ', 100%, 50%, 0.65)';
    
20.                 let r = num(20, 5),
    
21.                         x = num(r, canv.width - r),
    
22.                         y = num(r, canv.height - r);
    
23.                 ctx.beginPath();
    
24.                 ctx.arc(x, y, r, 0, Math.PI * 2);
    
25.                 ctx.fill();
    
26.         }
    
27.         ctx.fillStyle = 'darkgreen';
    
28.         ctx.font = 'bold 60px sans-serif';
    
29.         ctx.textAlign = 'center';
    
30.         ctx.textBaseline = 'middle';
    
31.         ctx.fillText('花潮论坛', canv.width / 2, canv.height / 2);
    
32. })();
    
33. 
    
34. </script>

复制代码

马黑黑

原本是为了测试画笔的 save 和 restore 方法，发现小球使用了原来为文本设置的阴影后也别具一格，就将函数改了改，去掉了save和restore

加林森

还挺漂亮的。

樵歌

作文字背景，可漂亮了。

马黑黑

樵歌 发表于 2022-8-24 08:01
作文字背景，可漂亮了。

好像可以一看

樵歌

马黑黑 发表于 2022-8-24 08:03
好像可以一看

字大小在那行设置呀

马黑黑

樵歌 发表于 2022-8-24 08:04
字大小在那行设置呀

28行，60px 是字号

樵歌

那数字的大小和数字成啥比例？

加林森

马黑黑 发表于 2022-8-24 08:03
不算难看

挺好的。

马黑黑

加林森 发表于 2022-8-24 08:10
挺好的。

加林森

马黑黑 发表于 2022-8-24 08:10

谢茶！

马黑黑

樵歌 发表于 2022-8-24 08:10
那数字的大小和数字成啥比例？

常规的阅读用到的字号，是14px，但偏小了，会用 16px。px是像素，可能抽象，你可以改用 em 做单位，一个 em 就是一个常规文字的大小，你可以试试 1.2em 体会体会 em 这个字号单位

红影

漂亮，色彩艳丽，每次刷新小球的颜色和位置都会发生变化，倒也不枯燥

红影

“发现小球使用了原来为文本设置的阴影后也别具一格”
黑黑真喜欢琢磨，厉害

马黑黑

红影 发表于 2022-8-24 11:13
“发现小球使用了原来为文本设置的阴影后也别具一格”
黑黑真喜欢琢磨，厉害

胡乱鼓捣的

马黑黑

红影 发表于 2022-8-24 11:12
漂亮，色彩艳丽，每次刷新小球的颜色和位置都会发生变化，倒也不枯燥

枯燥也是一种美的表现

樵歌

马黑黑 发表于 2022-8-24 08:13
常规的阅读用到的字号，是14px，但偏小了，会用 16px。px是像素，可能抽象，你可以改用 em 做单位，一个  ...

谢谢啦，等能上电脑时试试，昨天失枕了脖子痛头不能扭只能上平坂

马黑黑

樵歌 发表于 2022-8-24 16:18
谢谢啦，等能上电脑时试试，昨天失枕了脖子痛头不能扭只能上平坂

落枕很痛苦，不过老中医可以处理的，一分钟内解决问题