论坛 › 马黑黑教程专版 › canvas画布画阴影透明的小球也挺漂亮

马黑黑 发表于 2022-8-23 22:59

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

<style>
        #canv { margin: auto; display: block; position: relative; border: 1px solid; }
</style>

<canvas id="canv" width="600" height="400"></canvas>

<script>

let ctx = canv.getContext('2d');
let num = (end,start) => Math.floor(Math.random() * (end - start) + start);

(function draw() {
        ctx.clearRect(0, 0, canv.width, canv.height);
        ctx.shadowOffsetX = 4;
        ctx.shadowOffsetY = 4;
        ctx.shadowBlur = 8;
        ctx.shadowColor = 'black';
        for(j =0; j < 100; j ++) {
                ctx.fillStyle = 'hsla(' + num(0,360) + ', 100%, 50%, 0.65)';
                let r = num(20, 5),
                        x = num(r, canv.width - r),
                        y = num(r, canv.height - r);
                ctx.beginPath();
                ctx.arc(x, y, r, 0, Math.PI * 2);
                ctx.fill();
        }
        ctx.fillStyle = 'darkgreen';
        ctx.font = 'bold 60px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('花潮论坛', canv.width / 2, canv.height / 2);
})();

</script>

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

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

不算难看

马黑黑 发表于 2022-8-23 23:00

代码：
<style>
        #canv { margin: auto; display: block; position: relative; border: 1px solid; }
</style>

<canvas id="canv" width="600" height="400"></canvas>

<script>

let ctx = canv.getContext('2d');
let num = (end,start) => Math.floor(Math.random() * (end - start) + start);

(function draw() {
        ctx.clearRect(0, 0, canv.width, canv.height);
        ctx.shadowOffsetX = 4;
        ctx.shadowOffsetY = 4;
        ctx.shadowBlur = 8;
        ctx.shadowColor = 'black';
        for(j =0; j < 100; j ++) {
                ctx.fillStyle = 'hsla(' + num(0,360) + ', 100%, 50%, 0.65)';
                let r = num(20, 5),
                        x = num(r, canv.width - r),
                        y = num(r, canv.height - r);
                ctx.beginPath();
                ctx.arc(x, y, r, 0, Math.PI * 2);
                ctx.fill();
        }
        ctx.fillStyle = 'darkgreen';
        ctx.font = 'bold 60px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('花潮论坛', canv.width / 2, canv.height / 2);
})();

</script>

马黑黑 发表于 2022-8-23 23:02

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

加林森 发表于 2022-8-24 07:22

还挺漂亮的。

樵歌 发表于 2022-8-24 08:01

作文字背景，可漂亮了。

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

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

好像可以一看

樵歌 发表于 2022-8-24 08:04

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

字大小在那行设置呀

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

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

28行，60px 是字号

樵歌 发表于 2022-8-24 08:10

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

加林森 发表于 2022-8-24 08:10

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

挺好的。

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

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

{:4_190:}

加林森 发表于 2022-8-24 08:12

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


谢茶！

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

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

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

红影 发表于 2022-8-24 11:12

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

红影 发表于 2022-8-24 11:13

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

马黑黑 发表于 2022-8-24 12:21

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

胡乱鼓捣的

马黑黑 发表于 2022-8-24 12:22

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

枯燥也是一种美的表现

樵歌 发表于 2022-8-24 16:18

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

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

马黑黑 发表于 2022-8-24 17:39

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

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

查看完整版本: canvas画布画阴影透明的小球也挺漂亮