Question

有我的代码：

    /* Health */
context.globalAlpha = .5;
context.fillStyle   = "#c0392b";
context.fillRect( 50, 35, 100, 10 );
context.globalAlpha = 1;
context.fillStyle   = "#c0392b";
context.fillRect( 50, 35, hero.statistics.health, 10 );
context.globalAlpha = 1;
context.fillStyle   = "#e74c3c";
context.fillText( hero.statistics.health + "%", 122, 44 );

context.beginPath();
context.moveTo( 150, 45 );
context.lineTo( 150, 35 );
context.lineTo( 140, 35 );
context.closePath();
context.fill();

    /* Poison */
context.globalAlpha = .5;
context.fillStyle   = "#27ae60";
context.fillRect( 50, 47, 100, 10 );
context.globalAlpha = 1;
context.fillStyle   = "#27ae60";
context.fillRect( 50, 47, hero.statistics.poison, 10 );
context.globalAlpha = 1;
context.fillStyle   = "#2ecc71";
context.fillText( hero.statistics.poison + "%", 122, 56 );

context.beginPath();
context.moveTo( 150, 57 );
context.lineTo( 150, 47 );
context.lineTo( 140, 47 );
context.closePath();
context.fill();

    /* Experience */
context.globalAlpha = .5;
context.fillStyle   = "#f1c40f";
context.fillRect( 50, 59, 100, 5 );
context.globalAlpha = 1;
context.fillStyle   = "#f1c40f";
context.fillRect( 50, 59, hero.statistics.experience, 5 );

context.beginPath();
context.moveTo( 150, 69 );
context.lineTo( 150, 59 );
context.lineTo( 140, 59 );
context.closePath();
context.fill();

......它给了我这个:(没有脸）

如何删除三角形下方和删除三角形后的矩形部分？我不能将三角形颜色设置为黑色，因为背景会发生变化。

我想改变这个：

enter image description here

对此：

enter image description here

不将三角形着色为黑色。

Answer 1

您可以创建剪裁区域以将绘图限制为“corner-cut-rect”

演示：http://jsfiddle.net/m1erickson/j2dKz/

enter image description here

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");


    drawBar(50,35,100,10,10,"#c0392b","#e74c3c",75);
    drawBar(50,50,100,10,10,"#27ae60","#2ecc71",35);
    drawBar(50,65,100,10,10,"#f1c40f","#f1c40f",50);

    function drawBar(x,y,w,h,corner,fill1,fill2,percent){

        // create a clipping path 
        // with the right corner cut out

        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x+w-corner,y);
        ctx.lineTo(x+w,y+h);
        ctx.lineTo(x,y+h);
        ctx.closePath();
        ctx.clip();

        // do some fills
        // all fills will be restricted to the clip

        ctx.globalAlpha=.5;
        ctx.fillStyle=fill1;
        ctx.fillRect(x,y,w,h);
        ctx.globalAlpha=1;
        ctx.fillRect(x,y,percent,h);
        ctx.fillStyle=fill2;
        ctx.fillText(percent+"%",x+w-28,y+h-1);
        ctx.restore();

    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

删除图中另一个图下的部分

1 个答案: