حذف الرسم في HTML5

استخدام function clearRect() في HTML5 Canvas، function clearRect() في سياق 2D للتنظيف المستطيل من الرسم البياني. يصبح المستطيل الشفاف بعد التنظيف.

مثال عبر الإنترنت

استخدام function clearRect() في سياق 2D للتنظيف المستطيل من الرسم البياني. يصبح المستطيل الشفاف بعد التنظيف. هذا مثال على الكود:

<canvas id="ex1" width="500" height="150" style="حافة: 1px قوية #cccccc;">　　　　
الدعم لم يتم العثور على HTML5 Canvas　　　　
</canvas>　　　　
<script>　　　　
الرسم البياني = document.getElementById("ex1");　　　　
سياق = الرسم البياني.getContext("2d");　　　　
لون اللون الفارغ للسياق = "#ff0000";　　　　
النص رسم مستطيل (10،10،100،100);　　　　
لون خط السياق = "#0000ff";　　　　
النص رسم خط مستقيم (30،20،120،110);　　　　
context.clearRect(50,　30,　110,　35);　　　　　　　　　
</script>

لاحظ كيفية حذف المستطيل من داخل المستطيل الأحمر والأزرق.
كما ذكرنا سابقًا، تصبح المنطقة المحددة باستخدام clearRect() شفافة. إذا كان عنصر canvas موجودًا في أعلى عنصر آخر، فإن محتوى ذلك العنصر سيكون مرئيًا عبر المنطقة المحذوفة.

clearRect(x, y, width, height)

مثل رسم المستطيل، يتم تمرير أربعة معلمات إلى clearRect() لتعيين الزاوية العلوية اليسرى للمستطيل الذي سيتم حذفه، بالإضافة إلى عرضه وارتفاعه.
هذا هو مثال أكثر وضوحًا:

var　x　=　50;
var　y　=　30;
var　width　　=　110;
var　height　=　25;
context.clearRect(x,　y,　width,　height);