اذهب إلى المحتوى
  • 0

كيف يمكنني الرسم بواسطة الوسم "Javascript_Canvas" ضمن المتصفح؟ و هل من أمثلة على ذلك؟

عبد الرحيم

السؤال

Recommended Posts

  • 0

يمكنك الرسم باستخدام الوسم "Canvas" لرسم الخطوط و الدوائر و التداخل بينها ، لا تدعم هذه الميزات إلا الإصدارات الأخيرة من متصفّحات الإنترنت الصّادرة ضمن الربع الثاني من عام 2015 و ما بعد ، فيمكنك تضمين شيفرة رسم خط أو رسم دائرة ضمن وسم "Script" في موقعك و ذلك كما يلي:

  • شيفرة رسم خط:
</script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
في السطر البرمجي السابق يتم تحديد عرض الخط و لونه

</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(150,50);
ctx.lineTo(10,50);
ctx.stroke();

</script>
  • شيفرة رسم دائرة:
<script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
في السطر البرمجي السابق تم تحديد عرض الخط المستخدم برسم الدائرة و لونه و أبعاد المستطيل الذي رسمت داخله الدائرة
</canvas>
<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(70,18,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

</script>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...