0

是否可以创建画布路径，翻转它，然后应用填充？

它需要按照特定的顺序。

例子：

  1. 我画了一条路。假设它是一辆汽车。我没有填满路径（所以什么都看不见）
  2. 我翻转路径
  3. 我现在用渐变填充路径，这样渐变总是在同一个角度

编辑： 我尝试制作一个带有“未填充”路径的临时画布，翻转它，然后使用它来将其应用于“真实”画布： 

 ctx.drawImage(tempCanvas,0,0,canvasWidth, canvasHeight);

然后我像这样应用我的填充：

ctx.fill();

画布仍然是空的。我不知道具体为什么。我想这在某种程度上是不可能的？

4

1 回答 1

0

是的你可以！

您可以在绘制之前水平翻转画布，然后翻转之后绘制的所有内容。

没有性能损失！

当然，在你进行翻转之前，你需要 context.save() 并且在绘制之后你需要 context.restore() 以便进一步的绘图在未翻转的画布上。

要在绘制之前翻转画布，请执行以下转换：

context.translate(canvas.width,0);
context.scale(-1,1);

这是代码和小提琴：http: //jsfiddle.net/m1erickson/nFvaU/

<!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;}
    img{border:1px solid blue;}
</style>

<script>
    $(function(){

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

        var img=new Image();
        img.onload=function(){

            // 1. Save the un-flipped canvas
            ctx.save();

            // 2. Flip the canvas horizontally
            ctx.translate(canvas.width,0);
            ctx.scale(-1,1);

            // 3. Draw the image -- or you're path of a car
            ctx.drawImage(img,0,0);

            // 4. Restore the canvas so further draws are not flipped horizontally
            ctx.restore();

        }
        img.src="http://dl.dropbox.com/u/139992952/car.png";

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

</head>

<body>
    <p>Original Image</p>
    <img src="http://dl.dropbox.com/u/139992952/car.png" width=200 height=78>
    <p>Horizontally flipped Image on Canvas</p>
    <canvas id="canvas" width=200 height=78></canvas>
</body>
</html>
于 2013-02-24T23:24:48.207 回答