كود فرشة رسم حبر مائي باستخدام JavaScript

🎨 جاهز لتلوين الواجهة بحبر مائي؟ إليك مثال عملي على كود JavaScript لإنشاء فرشة تحاكي تأثير الحبر المائي أو الـ watercolor brush:

🖌️ كود فرشة رسم حبر مائي باستخدام 

<div id="drawingSurface" style="width:600px; height:400px; border:1px solid #ccc; position:relative;">
  <canvas id="paintLayer" width="600" height="400" style="position:absolute; top:0; left:0;"></canvas>
</div>

<script>
const surface = document.getElementById('paintLayer');
const ctx = surface.getContext('2d');
let active = false;

// إعداد الفرشة اللينة
ctx.lineWidth = 12;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.globalAlpha = 0.2;
ctx.strokeStyle = 'rgba(30, 144, 255, 0.4)';

surface.addEventListener('mousedown', () => active = true);
surface.addEventListener('mouseup', () => active = false);
surface.addEventListener('mousemove', applyBrush);

function applyBrush(e) {
  if (!active) return;

  const x = e.offsetX;
  const y = e.offsetY;

  ctx.beginPath();
  ctx.moveTo(x - 1, y - 1);
  ctx.lineTo(x + 1, y + 1);
  ctx.stroke();

  // نشر لمسات لونية خفيفة
  for (let i = 0; i < 3; i++) {
    const offsetX = Math.random() * 10 - 5;
    const offsetY = Math.random() * 10 - 5;
    ctx.beginPath();
    ctx.arc(x + offsetX, y + offsetY, Math.random() * 5, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(30, 144, 255, 0.1)';
    ctx.fill();
  }
}
</script>

🧪 ما الذي يميز هذا التأثير؟

  • الشفافية المتراكبة تعطي مظهر الحبر المائي الحقيقي.

  • البقع المتفرقة تضيف طابعًا عضويًا على الرسم.

  • إمكانية التعديل في strokeStyle و globalAlpha لتغيير النمط واللون.




19/7/2025 فكرة خاصة بي

تعليقات

إرسال تعليق