将对象放在画布的前面

Question

我尝试只使用一个<canvas>元素

1：剪辑图像

2：再制作一个矩形

但如何将该矩形放在前面？

---

var canvas = document.getElementById('example');
var ctx = canvas.getContext('2d');
var image = document.createElement('IMG');
image.onload = function () {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(29, 96);
    ctx.lineTo(157, 0);
    ctx.lineTo(288, 93);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(image, 0, 0);
    ctx.restore();
};
image.src = 'http://lorempixel.com/500/500/';



// This

ctx.rect(20,20,150,100);
ctx.fillStyle="red";
ctx.fill();

演示： http://jsfiddle.net/yW86d/

Answer 1

在绘制图像后绘制矩形

我修改了你的代码。试试这个，

var canvas = document.getElementById('example');
var ctx = canvas.getContext('2d');
var image = document.createElement('IMG');
image.onload = function () {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(29, 96);
    ctx.lineTo(157, 0);
    ctx.lineTo(288, 93);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(image, 0, 0);
    ctx.restore();

    ctx.beginPath();
    ctx.rect(20,20,150,100);
    ctx.fillStyle="red";
    ctx.fill();
};
image.src = 'http://lorempixel.com/500/500/';

Answer 2

在JavaScript画布中，最后绘制的元素位于顶部，因此您无法使用z-index来排列元素，只需按照希望它们的显示顺序绘制它们即可。 例如，如果你想要一个元素一直在后面 - 首先绘制它，如果你想要一个元素在每个其他元素之上 - 最后绘制它。

您的代码将类似于：

var canvas = document.getElementById('example');
var ctx = canvas.getContext('2d');
var image = document.createElement('IMG');
image.src = 'http://lorempixel.com/500/500/';


ctx.rect(20,20,150,100);
ctx.fillStyle="red";
ctx.fill();
image.onload = function () {
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(29, 96);
        ctx.lineTo(157, 0);
        ctx.lineTo(288, 93);
        ctx.closePath();
        ctx.clip();
        ctx.drawImage(image, 0, 0);
        ctx.restore();
};

图像在矩形之后绘制，因此它位于顶部：）