Html 如何在画布中将图像像素转换为曲线形状

我有一个具有以下图案的图像：

我想将图像中的直线转换为一个）|（形状）。我已经使用画布及其属性实现了C型和S型曲线，但我无法实现）|（曲线）

---

怎么做？

使用距水平中心的距离将正弦波应用于图像比例。您只需要部分正弦波（PI/2到PI）或（cos 0到PI/2）

var img=新图像；
img.src=“//i.stack.imgur.com/UvqUP.gif”；
var ctx=can.getContext（“2d”）；
img.onload=函数（）{
变量w，h，ch，cw，数量，x，刻度；
w=罐宽=此宽度；
h=罐高=此高度；
cw=w/2；
ch=h/2；
amount=50；//以像素为单位的弯曲量
金额*=1/ch；//换算成单位刻度
对于（变量x=0；x

---

使用距水平中心的距离将正弦波应用于图像比例。您只需要部分正弦波（PI/2到PI）或（cos 0到PI/2）

var img=新图像；
img.src=“//i.stack.imgur.com/UvqUP.gif”；
var ctx=can.getContext（“2d”）；
img.onload=函数（）{
变量w，h，ch，cw，数量，x，刻度；
w=罐宽=此宽度；
h=罐高=此高度；
cw=w/2；
ch=h/2；
amount=50；//以像素为单位的弯曲量
金额*=1/ch；//换算成单位刻度
对于（变量x=0；x

您可以稍微修改，并将减半正弦范围作为偏移应用于宽度（或高度），然后将该偏移x 2从新行的总高度中减去

发生的情况是sin（）函数将接受一个输入并生成一个介于[0.0,1.0]之间的新值。通常情况下，您将结合sin+cos生成一个圆，但我们只需要一个轴的值，并且由于我们只需要更多的椭圆形状，因此我们使用比半径更小的值进行缩放（图像大小将表示您所追求的轴上的直径）

我在另一个答案中对代码做了几处修改：

var ctx=c.getContext（“2d”）；//只是一些用于演示的初始化
var img=新图像；
img.onload=切片；
img.src=“//i.stack.imgur.com/UvqUP.gif”；
函数片（）{
var w=c.width=this.width；
var h=c.height=this.height；
var step=Math.PI/w；//半圆/画布宽度
var scale=75；//y轴上的最大位移
对于（变量x=0，偏移量；x

您可以稍微修改，并将减半正弦范围作为偏移应用于宽度（或高度），然后将该偏移x 2从新行的总高度中减去

发生的情况是sin（）函数将接受一个输入并生成一个介于[0.0,1.0]之间的新值。通常情况下，您将结合sin+cos生成一个圆，但我们只需要一个轴的值，并且由于我们只需要更多的椭圆形状，因此我们使用比半径更小的值进行缩放（图像大小将表示您所追求的轴上的直径）

我在另一个答案中对代码做了几处修改：

var ctx=c.getContext（“2d”）；//只是一些用于演示的初始化
var img=新图像；
img.onload=切片；
img.src=“//i.stack.imgur.com/UvqUP.gif”；
函数片（）{
var w=c.width=this.width；
var h=c.height=this.height；
var step=Math.PI/w；//半圆/画布宽度
var scale=75；//y轴上的最大位移
对于（变量x=0，偏移量；x

---

---

是的，你可以访问这里进行模型制作：-@kaidoi试图使用这种技术，但我认为我在这里犯了一些错误。但没有达到什么目的？是的，你是非常正确的，类似的事情。但它应该是这样的）|（这是两个倒“c”之间的一条直线，实际的直线是否都需要生成不同的结果，或者你只是在寻找“如何实现这一点”？是的，你可以访问这里进行模拟：-@kaidoi试图使用这种技术，但我认为我在这里犯了一些错误。但没有达到什么目的？是的，你是非常正确的，类似的事情。但它应该是这样的）|（这是两个倒“c”之间的一条直线，实际的直线是否都需要生成不同的结果，或者你只是在寻找“如何实现这一点”？这难道不是顶部注释中链接答案中的k3ns代码的一个整体副本吗？@torox在17小时前发布了此代码，但没有复制任何内容。@torox事实上，如果有任何内容被复制，则它来自我的答案。查看发布时间，看看谁是第一个。torox：这并不重要，因为代码相对通用，但它似乎是一个副本从我的回答中（不是在这篇文章中，而是>24小时）。你可以通过指向另一个问题中图像的图像链接看到这一点，而不是指向这个问题顶部的图像（PcYq9.gif）.一些变量有了新名称，其余的都很相似，

新图像

wo/括号，x的双decl.。公式自然会改变以匹配这里的问题。无论如何，我同意人们复制我的代码（如果他们这样做并假装他们没有这么做的话）.无论如何..@Blindman67我想torox的意思是，在Commo的链接答案中，这不是一个k3ns代码的全面副本吗