Bringen Objekt in den Vorder-und canvas

Ich versuche es mal mit nur einem <canvas> element

1 : schneiden Sie ein Bild

2 : um eine weitere Rechteck

Aber Wie bringen Sie das Rechteck auf der Vorderseite ?

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();

Demo : http://jsfiddle.net/yW86d/

Nur eine zusätzliche nach-gedacht. Sie verwenden können, compositing, zeichnen Sie neue Bilder, die hinter die bestehenden Bilder. Wenn Sie zum festlegen des Kontexts.globalCompositeOperation="Ziel-über" dein rotes Rechteck gezeichnet werden, hinter dem bestehenden Dreieck. (Hinweis: die neuen rect wird nur herangezogen werden transparente Pixel)

InformationsquelleAutor l2aelba | 2014-03-25

zeichnen Sie das Rechteck nach dem Bild gezogen wurde,

mir modifizierte code. versuchen Sie dieses,

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/';

InformationsquelleAutor singhiskng

In JavaScript canvas das Letzte element gezeichnet wird, ist auf der Oberseite, damit Sie nicht auf der z-index für die Organisation Ihrer Elemente, Sie müssen nur ziehen Sie Sie in der Reihenfolge Sie angezeigt werden sollen.
Zum Beispiel, wenn Sie wollen, dass ein element zu sein, den ganzen Weg in den Rücken - ziehen Sie es zuerst, und wenn Sie wollen, dass ein element auf jedes andere element, ziehen es die Letzte.

Ihr code so Aussehen:

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();
};