将对象放在画布的前面答案

【问题标题】：Bring object to the front in canvas将对象放在画布的前面
【发布时间】：2014-03-25 09:21:13
【问题描述】：

我尝试只使用一个<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/

【问题讨论】：

只是一个额外的事后想法。您可以使用合成在现有图像后面绘制新图像。当您设置 context.globalCompositeOperation="destination-over" 时，您的红色矩形将绘制在现有三角形的后面。（注意：新的矩形只会被绘制成透明像素）

标签： javascript canvas position z-index

【解决方案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/';

【讨论】：

【解决方案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();
};

图像是在矩形之后绘制的，所以它在顶部:)

【讨论】：