如何在canvas画布中旋转图像

马黑黑

南无月 发表于 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，可以铺满画布

南无月

马黑黑 发表于 2024-3-30 18:25
画矩形比画圆简单

满脑袋想的是渐变的事儿

南无月

马黑黑 发表于 2024-3-30 18:26
其实也不错。画布的渐变基于画布，具体图像使用它，在它具体的位置里，画布渐变在那里是什么样的，图像的 ...

是哒，我想那个圆是个窗子，可以看到窗外的风景。。

小辣椒

慢慢学习，许多不理解的

马黑黑

小辣椒 发表于 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
是哒，我想那个圆是个窗子，可以看到窗外的风景。。

世界辣么大，俺想去外面挖呀挖

小辣椒

马黑黑 发表于 2024-3-30 20:21
那是，毕竟是全新的东东

所以想马上实践还做不了的

马黑黑

小辣椒 发表于 2024-3-30 20:24
所以想马上实践还做不了的

不过你会Flash，我说过，代码不比 Flash 的复杂