把对象前在画布

我尽量只使用一个<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

把对象前在画布

回答

相关问题