مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش چگونگی کار با گرافیک در html بپردازیم. در html 5 شما می توانید اشکال هندسی مختلف را رسم کرده و آنها را ویرایش کنید. که اینکار در html با کمک جاوا اسکریپت انجام می شود.این اشکال هندسی ساده در html در موارد مختلفی از جمله سایت های آموزشی و تدریس، کاربرد دارد.
در مطالب آموزشی قبلی در حوزه html ما به آموزش چگونگی کار با تگ های Table , Div ، img ، تعریف رنگ ها در html ، تعریف فرم ها در html ، چگونگی افزودن ویدئو در html و … پرداختیم.
در این پست آموزشی نیز به آموزش کار با گرافیک در html می پردازیم.
graphic- کار با گرافیک
کار با گرافیک در html
در html برای رسم اشکال گرافیکی از تگ <canvas> استفاده می شود. از این تگ برای رسم اشکال هندسی با استفاده از طریق جاوا اسکریپت استفاده می شود. در واقع تگ <canvas> فقط یک ظرف برای ایجاد گرافیک در html است. و شما باید از جاوا اسکریپت برای رسم و ویرایش گرافیک استفاده کنید.
تگ <canvas> به تنهایی فقط یک محدوده ی مستطیلی برای رسم اشکال هندسی ایجاد می کند. و تعریف آن در html به این صورت است:
مثال :
| <canvas id="myCanvas" width="200" height="100"></canvas> |
صفت id به عنوان یک شناسه برای دسترسی به آن از طریق جاوا اسکریپت یا CSS و صفات width و height نیز طول و عرض مستطیل را مشخص می کند.
این یک مثال از ساختار اصلی canvas که یک مستطیل خالی را رسم می کند:
مثال : مثال canvas
| <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> |
رسم اشکال هندسی
مثال : کد اسکریپت زیر یک دایره را در محیط مستطیلی <canvas> ایجاد می کند:
مثال : رسم دایره
| var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); |
مثال ۲ : کد اسکریپت رسم خط یکی از قطرهای مستطیل:
مثال : رسم قطر
| var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); |
نوشتن متن
اینکار را به راحتی می توان با کد جاوا اسکریپت انجام داد.
مثال: کد زیر متن “Hellow World” را در محیط گرافیکی می نویسد:
مثال : نوشتن متن
| var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); |
متن تو خالی :
مثال : متن تو خالی
| var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World", 10, 50); |
رسم Gradient :
مثال : رسم gradient
| var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); |
رسم Circular Gradient:
مثال : رسم دایره ای gradient
| var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); |
رسم image:
مثال : رسم image
| var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img, 10, 10); |
کلام آخر
در html5 شما می توانید مستقل از کدهای css به رسم اشکال هندسی ساده و خاص بپردازید، این اشکال بیشتر در موارد علمی و آموزشی ممکن است کاربرد داشته باشند.که برای اینگونه مواقع مباحث چگونگی کار با گرافیک در html ارائه کردیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
