是否可以创建画布路径，翻转它，然后应用填充？
它需要按照特定的顺序。
示例：
修改 我尝试制作一个带有“未填充”路径的临时画布，翻转它，然后用它将它应用到“真实”画布上：
ctx.drawImage(tempCanvas,0,0,canvasWidth, canvasHeight);
然后我按照这样的方式应用了我的填充：
ctx.fill();
画布仍然是空的。我不知道为什么会这样。我想这在某种程度上是不可能的？
答案 0 :(得分：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>