把對象前在畫布

我儘量只使用一個<canvas>元素把對象前在畫布

enter image description here

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/

來源

2014-03-25 l2aelba

只是一個附加回想起。您可以使用合成功能在現有圖像後面繪製新圖像。當你設置context.globalCompositeOperation =「destination-over」時，你的紅色矩形將被繪製在現有的三角形後面。（注意：新矩形只能繪製成透明像素） – markE

繪製矩形圖像已經繪

我修改您的代碼之後。試試這個，

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

來源

2014-03-25 10:28:14 singhiskng

好點！非常感謝 – l2aelba

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

圖像在矩形後得出，因此其對頂部:)

來源

2014-03-25 10:33:35

抱歉，它根本不起作用 – l2aelba

把對象前在畫布

回答

相關問題