Question

我正在尝试使用HTML5画布绘图，所以我想出了这个。我应该会产生一个黄色的星星，它是由一个半身像（一个人的头部和肩膀）的绿色轮廓重叠。

但是，如果未注释drawStar（）行，则不会绘制绿色轮廓。这个工作代码是不是对正在发生的事情的解释那么重要。

http://jsfiddle.net/xiondark2008/LYfHJ/2/

HTML：

<!DOCTYPE html>
<html>
<head>
    <style>
    h6{
        -webkit-margin-before: .5em;
        -webkit-margin-after: 0;
    }
    label{
        margin-left: 1em;
    }
    </style>

</head>
<body>

    <canvas id="myCanvas" width="19" height="19" 
        style="border:1px solid d3d3d3;">
        Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>

的javascript：

function drawProfile(ctx,x,y,width,height) {
    this.flp = false;
    this.x = function(r){ return Math.floor(width*(this.flp?1-r:r)); }
    this.y = function(r){ return Math.floor(height*r); }

    ctx.save();

    ctx.translate( x, y );
    ctx.fillStyle="#40FF00";

    ctx.beginPath();
    ctx.moveTo( this.x(0), this.y(1) );
    ctx.bezierCurveTo(
        this.x(0),      this.y(125/190),
        this.x(70/190), this.y(170/190),
        this.x(75/190), this.y(120/190)
    );
    ctx.lineTo( this.x(95/190), this.y(130/190) );
    ctx.bezierCurveTo(
        this.x(40/190), this.y(130/190),
        this.x(30/190), this.y(0), 
        this.x(95/190), this.y(0)
    );

    this.flp = true;

    ctx.bezierCurveTo(
        this.x(30/190), this.y(0),
        this.x(40/190), this.y(130/190), 
        this.x(95/190), this.y(130/190)
    );
    ctx.lineTo( this.x(75/190), this.y(120/190) );
    ctx.bezierCurveTo(
        this.x(70/190), this.y(170/190),
        this.x(0), this.y(125/190),
        this.x(0), this.y(1)
    );
    ctx.fill();

    this.flp = false;

    ctx.restore();
}

function drawStar(ctx,x,y,height) {

    var pnts = 5,
        rad = height/(1-Math.cos(0.8*Math.PI));

    this.x = function(p,dst){
        return dst * Math.sin( (p/pnts)*2*Math.PI );
    }
    this.y = function(p,dst){
        return dst * Math.cos( (p/pnts)*2*Math.PI ) * -1;
    }
    this.movePct = function(a,b,pct){
        var f = (function(x){
                var m = (b.y-a.y)/(b.x-a.x);
                return m*x+(a.y-(a.x*m));
            }).bind(),
            r = b.x - a.x,
            point = {};

        point.x = a.x+(r*pct);
        point.y = f(point.x);

        return point;
    }
    this.transPoints = function(s,p,e,pct){
        var sp = this.movePct(s,p,pct),
            ep = this.movePct(e,p,pct);

        return [sp,ep];
    }

    ctx.save();

    ctx.translate( x+rad, y+rad );
    ctx.fillStyle = "#ffff00";

    ctx.beginPath();

    for(var i=0;i<pnts;i++){
        var dst = rad/2,
            s = { x: this.x( i+0.5, dst ),
                  y: this.y( i+0.5, dst ) },
            p = { x: this.x( i+1, rad ),
                  y: this.y( i+1, rad ) },
            e = { x: this.x( i+1.5, dst ),
                  y: this.y( i+1.5, dst ) },
            t = this.transPoints(s,p,e,.75);

        if(i==0){ ctx.moveTo( s.x, s.y ); }

        ctx.lineTo(t[0].x, t[0].y);
        ctx.quadraticCurveTo(p.x, p.y, t[1].x, t[1].y);
        ctx.lineTo(e.x, e.y);
    }
    ctx.fill();

    ctx.restore();

}

function draw(c) {

    var ctx = c.getContext("2d");

    this.x = function(r){ return c.width*r; }
    this.y = function(r){ return c.height*r; }

    ctx.shadowBlur=this.y(1/19);
    ctx.shadowColor="black";

    //drawStar( ctx, this.x(-3/19), this.y(-1/19), this.y(20/19) );
    drawProfile( ctx, this.x(6/19), this.y(1/19), this.x(18/19), this.y(18/19) );


    if(0){
        ctx.clearRect( this.x(1), this.y(0), this.x(1), this.y(1) );
        ctx.clearRect( this.x(0), this.y(1), this.x(1), this.y(1) );
    }

}

draw( document.getElementById("myCanvas") );

Answer 1

您在功能中使用this。在此处的上下文中，this绑定到window（有很多关于如何使用this的资源，而且你做错了。）

在使用this的每个函数中，is绑定到同一个函数（window），因此它们会覆盖彼此的变量。（这是因为你使用这些功能的方式。如果你new编辑它们，那将是一个不同的故事。）

所以

您的draw()方法设置了this.x，实际上是window.x，
然后将其作为参数传递给drawStar()
drawStar()函数方法更改this.x的值（window.x）并返回draw()
然后draw()使用drawProfile()（this.x）调用window.x，除非此时它的值是函数而不是您想要的浮点值。
drawProfile期望参数为float，但现在它是一个函数

（适用于x阅读x和y）

您可以使用闭包和变量完成所有操作。删除this es，您的程序将正常运行。可能。

Answer 2

乔是对的。您正在覆盖this.x和this.y函数。我不知道你为什么要这样做。我通过在函数drawProfile和drawStar的末尾将this.x和this.y函数重置为旧值来解决了这个问题：

function drawProfile(ctx,x,y,width,height) {
    var oldX = this.x, //storing the old values for this.x ...
        oldY = this.y; // ... and this.y
    this.flp = false;
    this.x = function(r){ return Math.floor(width*(this.flp?1-r:r)); }
    this.y = function(r){ return Math.floor(height*r); }

    ctx.save();

    ctx.translate( x, y );
    ctx.fillStyle="#40FF00";

    ctx.beginPath();
    ctx.moveTo( this.x(0), this.y(1) );
    ctx.bezierCurveTo( this.x(0), this.y(125/190),
                       this.x(70/190), this.y(170/190),
                       this.x(75/190), this.y(120/190)
                      );
    ctx.lineTo( this.x(95/190), this.y(130/190) );
    ctx.bezierCurveTo( this.x(40/190), this.y(130/190),
                       this.x(30/190), this.y(0), 
                       this.x(95/190), this.y(0)
                      );

    this.flp = true;

    ctx.bezierCurveTo( this.x(30/190), this.y(0),
                       this.x(40/190), this.y(130/190), 
                       this.x(95/190), this.y(130/190)
                      );
    ctx.lineTo( this.x(75/190), this.y(120/190) );
    ctx.bezierCurveTo( this.x(70/190), this.y(170/190),
                       this.x(0), this.y(125/190),
                       this.x(0), this.y(1)
                      );
    ctx.fill();

    this.flp = false;

    ctx.restore();

    this.x = oldX; //Restoring old values
    this.y = oldY;
}

function drawStar(ctx,x,y,height)
{
    var pnts = 5,
        rad = height/(1-Math.cos(0.8*Math.PI)),
        oldX = this.x, //storing the old values for this.x ...
        oldY = this.y; // ... and this.y

    this.x = function(p,dst){
        return dst * Math.sin( (p/pnts)*2*Math.PI );
    }
    this.y = function(p,dst){
        return dst * Math.cos( (p/pnts)*2*Math.PI ) * -1;
    }
    this.movePct = function(a,b,pct){
        var f = (function(x){
            var m = (b.y-a.y)/(b.x-a.x);
            return m*x+(a.y-(a.x*m));
        }).bind(),
            r = b.x - a.x,
            point = {};

        point.x = a.x+(r*pct);
        point.y = f(point.x);

        return point;
    }
    this.transPoints = function(s,p,e,pct){
        var sp = this.movePct(s,p,pct),
            ep = this.movePct(e,p,pct);

        return [sp,ep];
    }

    ctx.save();

    ctx.translate( x+rad, y+rad );
    ctx.fillStyle = "#ffff00";

    ctx.beginPath();

    for(var i=0;i<pnts;i++){
        var dst = rad/2,
            s = { x: this.x( i+0.5, dst ),
                 y: this.y( i+0.5, dst ) },
            p = { x: this.x( i+1, rad ),
                 y: this.y( i+1, rad ) },
            e = { x: this.x( i+1.5, dst ),
                 y: this.y( i+1.5, dst ) },
            t = this.transPoints(s,p,e,.75);

        if(i==0){ ctx.moveTo( s.x, s.y ); }

        ctx.lineTo(t[0].x, t[0].y);
        ctx.quadraticCurveTo(p.x, p.y, t[1].x, t[1].y);
        ctx.lineTo(e.x, e.y);
    }
    ctx.fill();

    ctx.restore();

    this.x = oldX; //Resetting the old values
    this.y = oldY;
}

function draw(c)
{

    var ctx = c.getContext("2d");

    this.x = function(r){ return c.width*r; }
    this.y = function(r){ return c.height*r; }

    ctx.shadowBlur=this.y(1/19);
    ctx.shadowColor="black";

    drawStar( ctx, this.x(-3/19), this.y(-1/19), this.y(20/19) );
    drawProfile( ctx, this.x(6/19), this.y(1/19), this.x(18/19), this.y(18/19) );



    if(0){
        ctx.clearRect( this.x(1), this.y(0), this.x(1), this.y(1) );
        ctx.clearRect( this.x(0), this.y(1), this.x(1), this.y(1) );
    }

}

draw( document.getElementById("myCanvas") );

http://jsfiddle.net/hhaXM/

Html 5画布麻烦

2 个答案: