الظل في Canvas

يمكن إضافة ظل تلقائيًا إلى الأشكال المرسومة على قناع HTML5، حيث يتم تعيين shadowOffsetX و shadowOffsetY لتعيين المسافة التي يجب رسم الظل منها رسم الشكل.

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

يمكن إضافة ظل تلقائيًا إلى الأشكال المرسومة على قناع HTML5. إليك بعض الأمثلة:

يتم التحكم في الظل من خلال أربعة خصائص 2D Context التالية:

1. shadowOffsetX

2. shadowOffsetY

3. shadowBlur

4. shadowColor

shadowOffsetX و shadowOffsetY يحددان المسافة التي يجب رسم الظل منها رسم الشكل. القيمة الإيجابية تعني رسم الظل على الجانب الأيمن من الشكل (x) والأسفل (y). القيمة السلبية تعني رسم الظل على الجانب الأيسر من الشكل (x) والجزء العلوي (y).
shadowBlur يحدد درجة الغموض التي يجب أن يكون لها الظل. القيمة الأعلى تعني شكل أكثر غموضًا. القيمة الأقل تعني ظل أكثر وضوحًا. القيمة 0 تعني أن الظل غير مملوح.
shadowColor يجب فقط تعيين لون الظل.
هذا هو رمز المثال السابق:

<canvas id="ex1" width="500" height="200" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas غير مدعوم
</canvas>
<script>
var canvas = document.getElementById("ex1");
var　context　=　canvas.getContext("2d");
context.shadowOffsetX　=　10;
context.shadowOffsetY　=　10;
context.shadowBlur　　　　=　4;
context.shadowColor　　　=　"#666666";// أو استخدم rgb(أحمر، أخضر، أزرق)
context.fillStyle　=　"#000000";
context.fillRect(10,10,　50,　50);
context.fillStyle　=　"#000066";
context.font　=　"30px　Arial";
context.fillText("HTML5　Canvas　Shadow",　10,120);
</script>