0

بلاگ

خدمات شبکه فراز نتورک > دانلود رایگان > وب مستر > آموزش HTML & CSS > آشنایی با گرافیک در HTML

آشنایی با گرافیک در HTML

2021/02/21
ارسال شده توسط
آموزش HTML & CSS
1.2k بازدید

آ‌شنایی با Canvas در HTML

ایجاد عناصر گرافیکی با استفاده از canvas

منظور از canvas چیست؟ عنصر <canvas> در html برای رسم گرافیک بر روی صفحه استفاده می شود.

  • 1 Canvas در html چیست؟
  • 2 مثال های canvas
  • 3 رسم یک خط در canvas
  • 4 رسم یک دایره
  • 5 رسم یک متن
  • 6 دادن افکت به متن
  • 7 رسم یک linear gradient
  • 8 رسم یک circular gradient

Canvas در html چیست؟

عنصر canvas برای رسم گرافیک توسط جاوا اسکریپت استفاده می شود. عنصر canvas فقط نگهدارنده گرافیک است. برای رسم گرافیک روی این عنصر باید از جاوا اسکریپت استفاده کنید.

Canvas چندین روش برای رسم مسیر ها، جعبه ها، دایره ها، متون و اضافه کردن تصاویر دارد.

مثال های canvas

یک canvas محیط مربعی است که بر روی صفحه وب قرار می گیرد. به صورت پیش فرض این عنصر هیچ حاشیه و محتوایی ندارد.

<canvas id="myCanvas" width="200" height="100"></canvas>

به یاد داشته باشید که همیشه باید خاصیت  id و طول، عرض این عنصر را تعیین کنید. برای اضافه کردن حاشیه از خاصیت style استفاده کنید.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
رسم یک مستطیل با استفاده از canvas
رسم یک مستطیل با استفاده از canvas

رسم یک خط در canvas

با کد زیر شما می‌توانید یک خط در کنار آن مستطیل که در ابتدا کشیدیم رسم کنید.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
رسم یک خط (قطر) بر روی مستطیل با استفاده از 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();
رسم یک دایره داخل مستطیل با استفاده از canvas
رسم یک دایره داخل مستطیل با استفاده از canvas

رسم یک متن

با استفاده از کد زیر می‌توانیم متنی را درون مستطیل چاپ کنیم.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
رسم یک متن با استفاده از canvas
رسم یک متن با استفاده از canvas

دادن افکت به متن

حالا می‌خواهیم متنی که در بالا ایجاد کردیم را بهش یک افکت مثل stroke بدهیم.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
افکت دادن به متن با استفاده از canvas

رسم یک linear 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);
رسم یک linear gradient با استفاده از canvas
رسم یک linear gradient با استفاده از canvas

رسم یک circular 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);
رسم گرادینت گرد با استفاده از canvas
رسم گرادینت گرد با استفاده از canvas

تا اینجا در این مقاله با canvas ها آشنا شدیم. این مبحث، مبحث پیشرفته ایست که می‌توانید در صورت علاقه بیشتر در رابطه با آن تحقیق کنید.

آشنایی با svg در HTML

ساخت تصاویر برداری مقیاس پذیر در HTML

منظور ازSVGچیست؟ چگونه می‌توانیم تصاویر برداری مقیاس پذیر ایجاد کنیم؟ چگونه تگ <svg> را یاد بگیریم؟ SVGچیه؟ در این مقاله می‌خواهیم در رابطه با تگ <svg> صحبت کنیم.

  • 1 SVG در html چیست؟
    • 1.1 عنصر یا تگ SVG در html
  • 2 رسم دایره
  • 3 رسم مستطیل
  • 4 رسم مربع گوشه خمیده
  • 5 رسم ستاره
  • 6 رسم لوگو
  • 7 تفاوت بین SVG و Canvas
    • 7.1 مقایسه Canvas و SVG

SVGدر html چیست؟

  • SVG معادل scalable vector graphics به معنای تصاویر برداری مقیاس پذیر است.
  • این عنصر یا تگ برای تعریف گرافیک در وب استفاده می شود.
  • همچنین SVG توسط w3c توصیه شده است.

عنصر یا تگ SVG در html

عنصر یا تگ <svg> یک عنصر نگهدارنده برای گرافیک برداری است. تگ <svg> چندین متد برای رسم مسیر ها، جعبه ها، دایره ها، متون و تصاویر گرافیکی دارد.

البته ما می‌توانیم از تصاویر خروجی گرفته شده نیز که در اینترنت موجود است استفاده کنیم. خب بریم در آخر مقاله از فصل آشنایی با گرافیک درHTML  با چند مثال بیشتر با SVG آشنا بشیم.

رسم دایره

در این قسمت با استفاده از تگ <svg> یک دایره رسم می‌کنیم که یک پس‌زمینه زرد دارد و حاشیه ۴ پیکسلی سبز رنگ دارد.

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
طراحی دایره با استفاده از تگ <svg>
طراحی دایره با استفاده از تگ

رسم مستطیل

در مثال زیر با استفاده از تگ <svg> یک مستطیل رسم می‌کنیم که پس زمینه آبی و حاشیه ۱۰ پیکسلی مشکی رنگ دارد.

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
آشنایی با SVG با رسم یک مستطیل
آشنایی با SVGبا رسم یک مستطیل

رسم مربع گوشه خمیده

در مثال زیر با استفاده از تگ <svg> یک مربع گوشه خمیده ایجاد کردیم. برای پیاده سازی این مربع از استایل هایCSS استفاده کردیم.

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
آموزش SVG با رسم یک مربع گرد شده

رسم ستاره

برای ایجاد اجزاء Polygon استایل مثل ستاره، از تگ <polygon> داخل تگ <svg> استفاده می‌کنیم. مانند مثال زیر که یک ستاره سبز رنگ با حاشیه بنفش رنگ ایجاد کرده ایم.

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
استفاده از SVG برای رسم ستاره
استفاده از SVG برای رسم ستاره

رسم لوگو

از <svg> برای رسم لوگو ها نیز می‌توانیم استفاده کنیم. برای مثال در مثال زیر با استفاده از گرادینت ها و نوشتار یک لوگو ساده با عنوان faraznetwork ایجاد کرده ایم.

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="40" y="86">faraznetwork</text>
  Sorry, your browser does not support inline SVG.
</svg>
طراحی لوگو با استفاده از SVG

تفاوت بین SVG و Canvas

SVG در حقیقت یک زبان برای تعریف گرافیک دو بعدی در xml است. Canvas گرافیک دو بعدی رسم می کند اما توسط جاوا اسکریپت.

تگ <svg> برپایه xml کار می کند، این مسئله باعث می شود هر عنصر داخل <svg> در dom قابل دسترس باشد. شما می توانید یک event جاوا اسکریپت را برای هر عنصر داخل آن تعریف کنید.

در تگ <svg>، هر شکل به عنوان یک شی در نظر گرفته می شود. اگر خواص یک شی موجود در svg تغییر کند، مرورگر به صورت خودکار آن رسم شکل را به روز می کند.

Canvas به صورت پیکسل به پیکسل رسم می کند. در canvas پس از رسم گرافیک مرورگر دیگر محتوای داخل canvas را به روز نمی کند. اگر قرار به تغییر موقعیت عنصر canvas باشد باید کل صحنه آن دوباره رسم شود، که این شامل هر شی که داخل آن است نیز می شود.

یک مقاله در رابطه با آشنایی با Canvas در پایگاه دانش فرازنتورک موجود هست که می‌تونید آن را بخوانید.

مقایسه Canvas و SVG

در اینجا به شرح مهم ترین تفاوت های svg و canvas می پردازیم.

canvas <svg>
وابسته به رزولیشن غیر وابسته به resolution
هیچ پشتیبانی بر روی رویداد ها ندارد پشتیبانی بر روی روایداد ها
سازگاری پایین در رسم متون مناسب برای اپلیکیش های مقیاس بزرگ مانند گوگل مپ
می توانید نتیجه را به صورت png یا jpg  ذخیره کنید رسم کند در استفاده های پیچیده(هر چیزی که به دفعات زیاد از dom استفاده کند آهسته می شود).
مناسب برای بازی های گرافیک محور برای بازی مناسب نیست

در این مقاله از سری مقالات آموزش متن محور HTML  با تگ SVGآشنا شدیم، مثال هایی از آن زدیم و تفاوت‌های آن را با Canvas مورد بررسی قرار دادیم. امیدوارم استفاده لازم را از محتوای این مقاله برده باشید و به خوبی آموزش گرافیک در HTML را آموخته باشید.

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده:راحله تبریزی

 

 

اشتراک گذاری:
برچسب ها:
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید