در HTML دو تگ canvas و SVG برای طراحی یک جزء گرافیکی (تصویر) مورد استفاده قرار می گیرد که بنابر تخصص برنامه نویسی و نیاز او ممکن است انتخاب متفاوتی صورت گیرد.
گرافیک در html
تگ canvas
این تگ از ساختار بوم نقاشی تبعیت می کند که در بسیاری از زبان های برنامه نویسی در ساختار ویندوز و وب نیز مرسوم است به این معنی که فضایی را به عنوان بوم رسم گرافیکی در نظر می گیرد و ترسیم هایی را در قالب اشکال و رنگ ها بر آن اعمال می کند و و ساختار ترسیم نیز کدهای برنامه نویسی است که در اینجا از جاوا اسکریپت به عنوان قلمو و ابزار این رسم استفاده شده است
در زیر یک بوم خام رسم را درج کردیم اما برای آنکه محدوده آن نیز مرسوم باشد یک چهارچوب رنگی نیز بر آن اعمال کردکه الزامی نیست
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
حال برای رسم یک خط راست از نقطه مختصاتی (0,0) به نقطه (200,100) که طبق ابعاد بوم ما در واقع قطر این بوم است دستور زیر را منویسیم
<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); </script>
در کدهای بالا به ترتیب با دستور document.getElementById(“myCanvas”) شی مورد نظر به عنوان بوم یا میزبان رسم را انتخاب کرده ایم سپس نوع قلم رسم را با c.getContext(“2d”) مشخص نموده ایم
دستور ctx.moveTo(0, 0) جهت انتقال نقطه آغاز/ادامه ترسیم به کار می رود
دستور ctx.lineTo(200, 100) شکل و محدوده رسم را تعیین می کند
و در نهایت با دستور ctx.stroke() ترسیم انجام می شود
در زیر ساختارهای دیگری از ترسیم نمایش داده شده است
رسم یک دایره
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
نوشتن یک متن تو پر
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
نوشتن یک متن تو خالی
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
رسم گرادیان
<script>
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);
</script>
رسم گرادیان دایره ای
<script>
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);
</script>
افزودن یک تصویر
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
تگ 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 width="400" height="120">
<rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>
هلال کردن گوشه های مستطیل
<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 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 height="130" width="500">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
تفاوت بین SVG و Canvas
SVG زبانی برای توصیف گرافیک دوبعدی در XML است، در حالی که Canvas گرافیک‌های دوبعدی را در پرواز ترسیم می‌کند (با جاوا اسکریپت).
SVG مبتنی بر XML است، به این معنی که هر عنصر در SVG DOM در دسترس است. می‌توانید کنترل‌کننده‌های رویداد جاوا اسکریپت را به گرافیک‌های SVG متصل کنید.
در SVG، هر شکل ترسیم شده به عنوان یک شی به خاطر سپرده می شود. اگر ویژگی های یک شی SVG تغییر کند، مرورگر می تواند به طور خودکار شکل را دوباره ارائه دهد.
بوم پیکسل به پیکسل رندر می شود. در بوم، پس از ترسیم گرافیک، توسط مرورگر فراموش می شود. اگر موقعیت آن باید تغییر کند، کل صحنه باید دوباره ترسیم شود، از جمله اشیایی که ممکن است توسط گرافیک پوشش داده شده باشند.
مقایسه SVG و Canvas
تفاوت مهم بین Canvas و SVG :
SVG
- رزولوشن مستقل
- پشتیبانی از گردانندگان رویداد
- قابلیت رندر متن خوب
- رندر آهسته اگر پیچیده باشد
- برای برنامه های بازی مناسب نیست
canvas
- وابسته به رزولوشن
- بدون پشتیبانی از مدیریت رویداد
- قابلیت رندر متن ضعیف
- می توانید تصویر به دست آمده را به صورت png. یا .jpg ذخیره کنید
- برای بازی های گرافیکی بسیار مناسب است