Javascript 从龙之旅中吸取黏液

基本上我想画画（看起来像一滴水）。我已经做了以下工作，但我想知道是否有更好的方法。也许用贝塞尔曲线或类似的东西

更新：

事实上，除了辉光点（白色）的渐变外，我让所有东西看起来都像我想要的那样

Slime.prototype.draye=函数（x，y，w，h）
{
ctx.save（）；
ctx.lineWidth=3；
ctx.beginPath（）；
var c=[]；
c、 推（“巩膜”）；
//c、 推动（“虹膜”）；
c、 推（“瞳孔”）；
var wScale=[1,2.2,3]；
var hScale=[1,2,1.3]；
对于（变量i=0；i

结束更新

---

是的，您只需使用4条三次贝塞尔曲线即可绘制液滴轮廓。

以下是仅使用4条C-Bez曲线进行的概念验证：

为什么？为什么<为什么。。。。。。。。。。我喜欢创造一个粘人吗？？

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
drawDropletMan（20,20，'rgb（63187255）'）；
drawDropletMan（255,55，'rgb（255180155）'；
功能drawDropletMan（x、y、填充）{
ctx.translate（x，y）；
绞车本体（填料）；
循环流（158111,3,18，填充）；
循环流动（32107,3,18，填充）；
眼睛（65,87,17,10）；
眼睛（120,90,17,10）；
口腔（33130）；
ctx.translate（-x，-y）；
}
//
功能抽油杆（fillcolor）{
ctx.save（）；
ctx.beginPath（）；
ctx.moveTo（109,0）；
ctx.bezierCurveTo（111,64199,35198123）；
比塞尔曲线图(199139183192,99190);；
比塞尔曲线图（66193，-4167,1110）；
ctx.bezierCurveTo（9,47,97,45109,1）；
ctx.fillStyle=fillcolor；
ctx.fill（）；
ctx.strokeStyle='black'；
ctx.线宽=2；
ctx.stroke（）；
ctx.clip（）；
ctx.shadowColor='black'；
ctx.shadowBlur=15；
ctx.线宽=1；
for（var i=0；感谢您的输入和帮助！我很高兴您喜欢它！
Slime.prototype.drawEye = function(x,y,w,h)
{

    ctx.save();
    ctx.lineWidth = 3;

    ctx.beginPath();
    var c = [];
    c.push("sclera");
    //c.push("iris");
    c.push("pupil");
    var wScale = [1,2.2,3];
    var hScale = [1,2,1.3];
    for (var i = 0; i < c.length; i++)
    {
        w /= wScale[i];
        h /= hScale[i];
        ctx.beginPath();
        ctx.ellipse(x,y,w,h,0,degreesToRadians(360),false);
        ctx.fillStyle = this.colors[c[i]];
        ctx.fill();
        ctx.stroke();
    }
    ctx.restore();

}
Slime.prototype.drawMouth = function()
{
    ctx.save();
    ctx.beginPath();

    var x = this.x+this.w/30;
    var y = this.y+this.h/8;
    var w = this.w;
    var h = this.h/8;
    var start = [x-w/3,y];
    var end = [x+w/8,y+h/5];

    // mouth
    bezierCurve(start,[x-w/3.3,y+h*2.3],[x+w/8,y+h*1.8],end);
    bezierCurveTo([x-w/10,y+h*0.6],[x-w/6,y+h*0.6],start);
    ctx.lineCap = "round";
    ctx.lineWidth = 8;
    ctx.stroke();
    ctx.clip();
    ctx.fillStyle = this.colors["mouth"];
    ctx.fill();

    start = [x-w/3.5,y+h*1];
    // tongue
    ctx.beginPath();
    bezierCurve(start,[x-w/5,y+h*2.5],[x+w/6.5,y+h*1.6],[x+w/9,y+h*0.75]);
    bezierCurveTo([x+w/10,y+h/4],[x-w/5,y],start);
    ctx.fillStyle = this.colors["tongue"];
    ctx.fill();
    //ctx.stroke();

    ctx.restore();
}
Slime.prototype.drawHealthBar = function()
{
    ctx.beginPath();
    ctx.rect(this.x-this.w,this.y+this.h/2+30,this.w*2*this.health/this.maxHealth,20);
    ctx.fillStyle = "#00ff00";
    ctx.fill();
    ctx.beginPath();
    ctx.rect(this.x-this.w+(this.w*2*this.health/this.maxHealth),this.y+this.h/2+30,(this.maxHealth-this.health)/this.maxHealth*this.w*2,20);
    ctx.fillStyle = "#ff0000";
    ctx.fill();
    ctx.beginPath();
    ctx.rect(this.x-this.w,this.y+this.h/2+30,this.w*2,20);
    ctx.strokeStyle = "#000000";
    ctx.stroke();
}
Slime.prototype.drawBody = function()
{
    ctx.save();
    ctx.fillStyle = this.colors["body"];
    ctx.beginPath();
    var x = this.x;
    var y = this.y+this.h*0.4;
    var w = this.w/2;
    var h = this.h;
    var left = [x-w*0.97,this.y+h/11];
    var bottom = [x,this.y+h*0.495];
    var right = [x+w*0.97,this.y+h/15];
    var top = [x+this.w/30,this.y-h/2+this.topOffset];
    bezierCurve(left,[x-w,y+h/10],[x-w/7,y+h/12],bottom);
    bezierCurveTo([x+w*0.8,y+h/10],[x+w*1.05,y-h/7],right);
    y = this.y - (y - this.y);
    bezierCurveTo([x+w*0.75,y+h/15],[x+w*0.2,y+h/4.5],top);
    bezierCurveTo([x-w*0.2,y+h/5],[x-w*0.8,y+h/10],left);
    ctx.lineWidth = 3;
    ctx.fill();
    ctx.strokeStyle = this.colors["bodyOutline"];
    ctx.stroke();
    ctx.clip();
    ctx.shadowColor = "#000033";
    ctx.shadowBlur = 40;
    ctx.shadowOffsetX = ctx.shadowBlur/4;
    ctx.shadowOffsetY = ctx.shadowOffsetX*-0.8;
    ctx.lineWidth = 4;
    for (var i = 0; i < 7; i++)
    {
        if (i%2==0)
        {
             ctx.shadowColor = "#000033";
        }
        else
        {
            ctx.shadowColor = "rgba(0,0,80,0.5)";
        }
        ctx.stroke();
    }
    ctx.restore();
}
Slime.prototype.drawGlow = function(x,y,r1,r2)
{
    ctx.save();
    var g = ctx.createRadialGradient(x,y,r1,x,y,r2);
    g.addColorStop(0.0,"#ffffff");
    g.addColorStop(1.0,this.colors["body"]);
    ctx.beginPath();
    ctx.arc(x,y,r2,0,degreesToRadians(360),false);
    ctx.fillStyle = g;
    ctx.fill();
    ctx.restore();
}
Slime.prototype.draw = function()
{
    ctx.lineWidth = 2;
    this.drawBody();
    this.drawMouth();
    var w = this.w/10;
    var h = this.h/10;
    var x = this.x;
    var y = this.y;
    this.drawEye(x-this.w/4.5,y-h/2.5,w,h);
    this.drawEye(this.x+this.w/13,y-h/10,w,h);
    this.drawGlow(this.x-this.w/2.5,this.y+this.h/12,this.w/50,this.w/16);
    this.drawGlow(this.x+this.w/2*0.7,this.y+this.h/10,this.w/50,this.w/16);
}