بدون أي مكتبة ملحق ، هل من الممكن أن يكون لديك طبقات متعددة في نفس العنصر قماش؟
لذلك إذا قمت بإجراء clearRect على الطبقة العليا ، فلن يمحو الطبقة السفلية؟
شكر.
لا ، ومع ذلك ، يمكنك طبقة عناصر <canvas>
متعددة فوق بعضها البعض وإنجاز شيء مماثل.
<div style="position: relative;">
<canvas id="layer1" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
ارسم الطبقة الأولى على اللوحة القماشية layer1
والطبقة الثانية على اللوحة القماشية layer2
. ثم عندما تظهر clearRect
في الطبقة العليا ، فسيظهر كل ما هو موجود على اللوحة السفلية.
متعلق بهذا:
إذا كان لديك شيء ما على قماش الرسم الخاص بك وترغب في رسم شيء ما في الجزء الخلفي منه - يمكنك القيام بذلك عن طريق تغيير السياق. إعداد GlobalCompositeOperation إلى "وجهة مقصودة" - ثم إعادته إلى "مصدر إضافي" عند قيامك بذلك إعادة القيام به.
var co = document.getElementById('cvs').getContext('2d');
// Draw a red square
co.fillStyle = 'red';
co.fillRect(50,50,100,100);
// Change the globalCompositeOperation to destination-over so that anything
// that is drawn on to the canvas from this point on is drawn at the back
// of whats already on the canvas
co.globalCompositeOperation = 'destination-over';
// Draw a big yellow rectangle
co.fillStyle = 'yellow';
co.fillRect(0,0,600,250);
// Now return the globalCompositeOperation to source-over and draw a
// blue rectangle
co.globalCompositeOperation = 'source-over';
co.fillStyle = 'blue';
co.fillRect(75,75,100,100);
يمكنك إنشاء عناصر canvas
متعددة دون إلحاقها بالمستند. ستكون هذه الطبقات :
ثم افعل ما تريد معهم وفي النهاية ، فقط قم بتقديم المحتوى الخاص بهم بالترتيب الصحيح في قماش الوجهة باستخدام drawImage
على context
.
مثال:
/* using canvas from DOM */
var domCanvas = document.getElementById('some-canvas');
var domContext = domCanvas.getContext('2d');
domContext.fillRect(50,50,150,50);
/* virtual canvase 1 - not appended to the DOM */
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50,50,150,150);
/* virtual canvase 2 - not appended to the DOM */
var canvas2 = document.createElement('canvas')
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = 'yellow';
ctx2.fillRect(50,50,100,50)
/* render virtual canvases on DOM canvas */
domContext.drawImage(canvas, 0, 0, 200, 200);
domContext.drawImage(canvas2, 0, 0, 200, 200);
وهنا بعض codepen: https://codepen.io/anon/pen/mQWMMW
كنت أواجه نفس المشكلة أيضًا ، بينما أنا مع عناصر قماش متعددة مع وضع: المطلقة تقوم بالمهمة ، إذا كنت تريد حفظ المخرجات في صورة ، فلن ينجح ذلك.
لذا ، تقدمت وقمت بـ "نظام" طبقات بسيط للتشفير كما لو كان لكل طبقة شفرة خاصة بها ، ولكن يتم تقديمها جميعًا في نفس العنصر.
https://github.com/federicojacobi/layeredCanvas
أنوي إضافة إمكانات إضافية ، لكن في الوقت الحالي ، ستقوم بذلك.
يمكنك القيام بوظائف متعددة والاتصال بهم من أجل "طبقات" مزيفة.
يمكنك أيضًا تسجيل الخروج http://www.concretejs.com وهو إطار قماش Html5 حديث وخفيف الوزن يمكّن من الكشف عن النتائج والطبقات والكثير من الأشياء الطرفية الأخرى. يمكنك فعل أشياء مثل هذا:
var wrapper = new Concrete.Wrapper({
width: 500,
height: 300,
container: el
});
var layer1 = new Concrete.Layer();
var layer2 = new Concrete.Layer();
wrapper.add(layer1).add(layer2);
// draw stuff
layer1.sceneCanvas.context.fillStyle = 'red';
layer1.sceneCanvas.context.fillRect(0, 0, 100, 100);
// reorder layers
layer1.moveUp();
// destroy a layer
layer1.destroy();
أدرك أن Q لا ترغب في استخدام مكتبة ، لكنني سأقدمها للآخرين القادمين من عمليات بحث Google. ذكرت @ EricRowell مكونًا جيدًا ، ولكن يوجد أيضًا مكون إضافي يمكنك تجربته ، html2canvas .
في حالتنا نحن نستخدم ملفات PNG شفافة ذات طبقات مع z-index
كأداة مصغّرة "منشئ المنتج". عملت Html2canvas ببراعة على غلي المكدس أسفل دون دفع الصور ، ولا تستخدم التعقيدات ، الحلول ، والقماش "غير المستجيب" نفسه. لم نكن قادرين على القيام بذلك بسلاسة/عاقل مع قماش Vanilla + JS.
أولاً ، استخدم z-index
على divs المطلقة لإنشاء محتوى ذو طبقات داخل مجمع محدد نسبيًا. ثم قم بتمرير الغلاف عبر html2canvas للحصول على لوحة قماشية مقدمة ، والتي قد تتركها كما هي ، أو يمكنك إخراجها كصورة حتى يتمكن العميل من حفظها.