هل هناك طريقة لتوسيع قماش HTML5 ديناميكيا دون مسح ما الذي تم رسمه؟
https://stackoverflow.com/questions/2405772
-
18-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
يرى هذه
عندما يصل الإخراج إلى أسفل الصفحة، أود تمديد قماش تلقائيا بحيث يمكنه الاستمرار في الذهاب. حاولت تحديد الخاصية Canvas.height، لكنها تقوم بمسح النافذة. هل هناك أي طريقة للقيام بذلك؟
المحلول
ما أفعله:
إنشاء قماش وهمية مع نفس الحجم مثل قماش الخاص بك.
dummyCanvas.getContext('2d').drawImage(yourCanvas, 0, 0);
newCanvas = recreate(yourCanvas);
newCanvas.getContext('2d').drawImage(dummyCanvas);
ليست جميلة جدا، خاصة في وضعك حيث سيتطلب منك إعادة إنشاء قماش 50+ مرة في الثانية ... المهتمين برؤية إجابات أخرى ... إنها تعمل من أجلي لأنني فقط تغيير حجم القماش عند تغييرات العميل / العميل [النافذة .
نصائح أخرى
أعرف أن هذا هو نوع من القديم الآن، ومع ذلك:
لا تحتاج إلى إعادة إنشاء القماش كما يفسر Itzwarty. يمكنك ان تفعلها:
<html>...
<canvas id="canvas"></canvas>
<canvas id="buffer" style="display:none;"></canvas>
...
</html>
ثم سيكون هذا جافا سكريبت الخاص بك:
var canvas = document.getElementById('canvas');
var buffer = document.getElementById('buffer');
window.onresize = function(event) {
var w = $(window).width(); //Using jQuery for easy multi browser support.
var h = $(window).height();
buffer.width = w;
buffer.height = h;
buffer.getContext('2d').drawImage(canvas, 0, 0);
canvas.width = w;
canvas.height = h;
canvas.getContext('2d').drawImage(buffer, 0, 0);
}
أنت هنا فقط تغيير حجم اللوحات، ونسخ الصورة عبر الصورة. لست متأكدا، لكنني أعتقد أن الأداء أفضل قليلا، وهو في رأيي أبسط وأسهل لفهم.
