如何在canvas画布中旋转图像

南无月

马黑黑 发表于 2024-3-30 20:07
嗯，它是内窗往外扩展了

好哒，老师支持我这样的想法呀。。

南无月

马黑黑 发表于 2024-3-30 20:08
是，没问题的。渐变的设置，需要里面的图像去呈现。有空我会讲一讲画布的渐变，一通百通，通则不痛，不通 ...

这个渐变里面太多数据。。。
老师要开课那真是太好了。。
噼里啪啦。。。

南无月

马黑黑 发表于 2024-3-30 20:19
设计这个，可以放开思维吧。

径向渐变，它是由一个点往外发射。以 400 * 400 的画布为例，假如我们希 ...

gradient.addColorStop(0, 'red');
gradient.addColorStop(0.3, 'blue');
gradient.addColorStop(0.9, 'green');

上面，给 gradient 渐变添加了三种颜色，第一种红色，从 0 开始，到 0.3（30%）止，其他依此方式理解。add 是添加的意思， Color 颜色，Stop 停止，大概意思就是添加一个颜色到它终止的的地方（比如 0.3)。

原来第二行的0.3是上一行红色终止的位置。。。
每一行都是如此，那我就明白你一楼的那么多颜色是什么宽度了。。

南无月

马黑黑 发表于 2024-3-30 20:19
设计这个，可以放开思维吧。

径向渐变，它是由一个点往外发射。以 400 * 400 的画布为例，假如我们希 ...

gradient.addColorStop(0, 'red');
gradient.addColorStop(.15, 'orange');
gradient.addColorStop(.3, 'yellow');
gradient.addColorStop(.45, 'green');
gradient.addColorStop(.51,'cyan');
gradient.addColorStop(.85,'blue');
gradient.addColorStop(1,'purple');

我把圆调得大大的，看后面的渐变背景。。
这样就理解每种颜色的宽度了。。
大家都是.15的宽度。。
只有cyan只有.06宽，blue最宽有.26，从图上可以明显看出来
我的笨法子还是有用滴

南无月

马黑黑 发表于 2024-3-30 20:22
可是设置突破画布宽高的渐变

刚明白小数是上一行终止的位置。

(190, 200, 15,200, 200, 280);
突破画布，就是280可以为300的意思么。。
不过显示不出来就变成宽度减少了。。

南无月

马黑黑 发表于 2024-3-30 20:23
世界辣么大，俺想去外面挖呀挖

无条件支持哈。
窗外的世界很精彩。。
有彩色渐变还会旋转。。

不过这个旋转代码可不是之前那么容易看到。。看得烧脑。。歇会儿。。

红影

马黑黑 发表于 2024-3-30 16:29
渐变是整个画布的渐变，在不同区域呈现的图像，只要使用 gradient 填充或描边，色彩都不一样

嗯嗯，而圆在画布上移动，就被填充了不同的色彩。

马黑黑

红影 发表于 2024-3-30 22:36
嗯嗯，而圆在画布上移动，就被填充了不同的色彩。

是这样的

红影

马黑黑 发表于 2024-3-30 16:29
好玩吧

很有趣，我玩了半天呢

马黑黑

红影 发表于 2024-3-30 22:39
很有趣，我玩了半天呢

贪玩

马黑黑

南无月 发表于 2024-3-30 22:03
无条件支持哈。
窗外的世界很精彩。。
有彩色渐变还会旋转。。

不急的

红影

马黑黑 发表于 2024-3-30 16:30
对，有无限可能

这个真的去琢磨，肯定能得到想不到的效果。

红影

马黑黑 发表于 2024-3-30 16:31
其实在做时钟过程中类似的也有，只是时钟的需求与别的不同，不变展示更多的东东

还真没注意，光顾着看时钟的设置了

马黑黑

红影 发表于 2024-3-30 22:40
这个真的去琢磨，肯定能得到想不到的效果。

会的

马黑黑

红影 发表于 2024-3-30 22:40
还真没注意，光顾着看时钟的设置了

它里面动的方面有指针的旋转

马黑黑

南无月 发表于 2024-3-30 21:50
刚明白小数是上一行终止的位置。

(190, 200, 15,200, 200, 280);

有时候为了需要。比方讲，让整个画布都充满颜色，不留空白

马黑黑

南无月 发表于 2024-3-30 21:46
gradient.addColorStop(0, 'red');
gradient.addColorStop(.15, 'orange');
gradient.addColor ...

颜色的占比分配因为有颜色的交接，彼此间的影响是有的，强烈的颜色会霸道一些

马黑黑

南无月 发表于 2024-3-30 21:43
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.3, 'blue');
gradient.addColorStop(0.9,  ...

这个需要慢慢领悟

马黑黑

南无月 发表于 2024-3-30 21:31
这个渐变里面太多数据。。。
老师要开课那真是太好了。。
噼里啪啦。。。

但是这个我估计也讲的不好

马黑黑

南无月 发表于 2024-3-30 21:30
好哒，老师支持我这样的想法呀。。

都可以尝试的