1

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") );
4

2 に答える 2