南无月 发表于 2024-3-30 17:06
感觉我有缺课。。
var gradient = ctx.createRadialGradient(190, 200, 15, 200, 200, 280);
这个径向渐 ...
径向渐变原理和CSS的差不多，表达方式和结构不同而已。
var gradient 一句，var 是JS声明变量用的，变量名为 gradient，等号后面是画笔创建一个径向渐变，createRadialGradien 是这个渐变的固有名称，参数六个分三组，x1,y1,r1, x2,y2,r2，x_y_标签镜像圆心，r_表示径向半径。径向渐变是一圈一圈的。
然后要设置颜色，至少需要两组，像这样：
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'green');
设置多少个颜色就用多少句，每一句两个参数，第一个参数从 0~1 取值，不能少于0不能大于1，分配好就好；第二个参数是颜色值，要用引号包裹，每一句只能使用一个颜色。
南无月 发表于 2024-3-30 18:21
大哥，我不会画的呀。
画矩形比画圆简单
南无月 发表于 2024-3-30 18:20
矩形0.0位置旋转和以中心点位置旋转可以理解。。下方代里中这个圆的显示，是不是可以想象成一个以中心点 ...
其实也不错。画布的渐变基于画布，具体图像使用它，在它具体的位置里，画布渐变在那里是什么样的，图像的背景用了渐变的话，就怎么样
南无月 发表于 2024-3-30 18:17
var gradient = ctx.createRadialGradient(190, 200, 15, 200, 200, 280);
这六个数字是范围？ ...
径向渐变是圆圈发散，所以，需要圆心点坐标 x,y，再加上半径 r，共两组，所以公式是酱紫：
(x1, y1, r1, x2, y2, r2)
x1,y1,r1,
x2,y2,r2，
位置加半径。这不应该是两组的么。。
第一个参数从 0~1 取值，不能少于0不能大于1（这个数据它管颜色范围大小是不是。。比如.015比较窄。.85比较宽）
南无月 发表于 2024-3-30 18:28
x1,y1,r1,
x2,y2,r2，
位置加半径。这不应该是两组的么。。
x_ y_ r_ 设置的是渐变作用的范围；
addColorStop(0, 'red') 设置的是颜色在上面范围的位置与占比（占比根据它后面句的设置）
马黑黑 发表于 2024-3-30 18:31
x_ y_ r_ 设置的是渐变作用的范围；
addColorStop(0, 'red') 设置的是颜色在上面范围的位置与占比（占 ...
半径就是范围，终于明白了。。
小数是颜色在范围里的占比。。
190, 200, 15,
200, 200, 280
就是起始位置是190，200，半径15
结束位置是：200.200.半径280。。。所以这个圆的直径560.....
画布400的话，对角线约为560，可以铺满画布{:4_170:}
马黑黑 发表于 2024-3-30 18:25
画矩形比画圆简单
{:4_170:}满脑袋想的是渐变的事儿
马黑黑 发表于 2024-3-30 18:26
其实也不错。画布的渐变基于画布，具体图像使用它，在它具体的位置里，画布渐变在那里是什么样的，图像的 ...
是哒，我想那个圆是个窗子，可以看到窗外的风景。。{:4_170:}
慢慢学习，许多不理解的
小辣椒 发表于 2024-3-30 20:03
慢慢学习，许多不理解的
这个，按道理不必Flash复杂
南无月 发表于 2024-3-30 18:43
是哒，我想那个圆是个窗子，可以看到窗外的风景。。
嗯，它是内窗往外扩展了
南无月 发表于 2024-3-30 18:42
满脑袋想的是渐变的事儿
是，没问题的。渐变的设置，需要里面的图像去呈现。有空我会讲一讲画布的渐变，一通百通，通则不痛，不通则痛。
马黑黑 发表于 2024-3-30 20:06
这个，按道理不必Flash复杂
刚才看了一下，这个要仔细看看然后实践才行
南无月 发表于 2024-3-30 18:41
半径就是范围，终于明白了。。
小数是颜色在范围里的占比。。
设计这个，可以放开思维吧。
径向渐变，它是由一个点往外发射。以 400 * 400 的画布为例，假如我们希望第一个渐变从中心开始，半径覆盖整个画布，那么，x1、y1、r1 设为：
200, 200, 200
接着，第二组我们希望它从 120, 80 开始，半径100，那么，x2、y2、r2 设置为：
100， 80， 100
ctx 画笔的径向渐变语句则为：
let gradient = ctx.createRadialGradient(200, 200, 200, 100, 80, 100);
以上是设置径向渐变覆盖画布的范围。它现在还不能发挥作用，需要给它添加颜色和各颜色的占比，比如我们要添加三种颜色：
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.3, 'blue');
gradient.addColorStop(0.9, 'green');
上面，给 gradient 渐变添加了三种颜色，第一种红色，从 0 开始，到 0.3（30%）止，其他依此方式理解。add 是添加的意思， Color 颜色，Stop 停止，大概意思就是添加一个颜色到它终止的的地方（比如 0.3)。
小辣椒 发表于 2024-3-30 20:10
刚才看了一下，这个要仔细看看然后实践才行
那是，毕竟是全新的东东
南无月 发表于 2024-3-30 18:41
半径就是范围，终于明白了。。
小数是颜色在范围里的占比。。
可是设置突破画布宽高的渐变
南无月 发表于 2024-3-30 18:43
是哒，我想那个圆是个窗子，可以看到窗外的风景。。
世界辣么大，俺想去外面挖呀挖{:4_170:}
马黑黑 发表于 2024-3-30 20:21
那是，毕竟是全新的东东
所以想马上实践还做不了的
小辣椒 发表于 2024-3-30 20:24
所以想马上实践还做不了的
不过你会Flash，我说过，代码不比 Flash 的复杂