آموزش canvas در HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 04 آذر 1399

آموزش canvas در HTML مبحث این مقاله از سایت دویکس است. Canvas یک عنصر HTML5 است که به شما امکان می دهد گرافیک های دو بعدی را مستقیماً در مرورگر وب خود ایجاد کنید. این یک ابزار قدرتمند و همه کاره است که می‌توان از آن برای ایجاد طیف گسترده‌ای از برنامه‌های کاربردی، از جمله بازی‌ها، انیمیشن‌ها، نمودارها و ابزارهای طراحی استفاده کرد.

کار با canvas در HTML

عنصر <canvas> توسط اپل در سال 2004 ایجاد شد و بعداً به مشخصات HTML5 اضافه شد. این کمی پیچیده‌تر از عناصر اساسی است ، اما به دلیل انعطاف پذیری زیاد از آن استفاده می‌شود. شما می‌توانید از بوم HTML5 برای انیمیشن‌ها، گرافیک بازی و سایر عناصر بصری استفاده کنید.

<canvas> در HTML منطقه‌ای را برای طراحی به صورت 2 بعدی ایجاد می‌کند. اندازه آن به طور پیش فرض 300 در 150 پیکسل است، اما می‌توانید اندازه را با استفاده از ویژگی‌های قد و عرض تغییر دهید.

همچنین می‌توانید از CSS برای تغییر نقاشی خود استفاده کنید، به عنوان مثال، حاشیه اضافه کنید:

<!DOCTYPE html>
<html>
<body>
  <canvas id="ThisIsCanvas" width="150" height="150" style="border: 2px solid #000000;">
    HTML5 canvas tag is unsupported in your browser.
  </canvas>
</body>
</html>

همچنین در آموزش canvas در HTML می‌توانید متن موجود در تگ‌ها را در مثال بالا مشاهده کنید. اگر محتوای <canvas> بارگیری نشود ، مرورگر آن را نمایش می‌دهد. لزوماً لازم نیست که یک متن باشد: شما همچنین می‌توانید یک تصویر اضافه کنید.

توجه: ما برای ساده سازی دسترسی به بوم توصیه می‌کنیم از ویژگی id استفاده کنید.

شما باید با JavaScript به منطقه دسترسی پیدا کنید تا واقعاً در آن نقاشی کنید. برای درک مراحل لازم، ما یک نقاشی بوم ساده و متن آن را تجزیه و تحلیل می‌کنیم. برای آموزش HTML5 canvas ساده ما از مثال زیر استفاده می‌کنیم. در آن یک مربع پر از رنگ ثابت ترسیم می‌کنیم:

<!DOCTYPE html>
<html>
<body>
  <canvas id="ThisIsCanvas" width="150" height="150" style="border: 2px solid #000000;">
    HTML5 canvas tag is unsupported in your browser.
  </canvas>
<script>
  var b=document.getElementById("ThisIsCanvas"); 
  var ctx=b.getContext("2d"); 
  ctx.fillStyle="#E9967A"; 
  ctx.fillRect(0, 0, 150, 150); 
</script> 
</body>
</html>

حال بیایید خط به خط اسکریپت JS را توضیح دهیم:

We define the canvas element	(var b = document.getElementById(“ThisIsCanvas”
We define the context	;(var ctx = b.getContext(“2d”
We draw a shape (a rectangle) and color it using the color we chose	;ctx.fillStyle = “#E9967A” ;ctx.fillRect(0, 0, 150, 150)

توابعی را که می توانید برای ترسیم مستطیل ها استفاده کنید مشاهده کنید:

یک مستطیل پر شده ایجاد می کند	(fillRect(x, y, width, height
یک سبک برای پر کردن مستطیل تعریف می کند	(fillStyle(color or pattern
با استفاده از ضربات یا حاشیه مستطیل ایجاد می کند	(strokeRect(x, y, width, height
یک سبک سکته مغزی برای مستطیل تعریف می کند	(strokeStyle(color or pattern
فضای مشخص شده در مستطیل را پاک می کند	(clearRect(x, y, width, height

توجه: x و y فاصله محورهای x و y بوم HTML5 را نشان می دهد.

مثال‌های از HTML5 canvas

اکنون که با HTML5 canvas آشنا شدید، بیایید نمونه‌های بیشتری را ببینیم و با امکانات مختلفی که ارائه می‌دهد ، آشنا شویم.

رسم خط

<!DOCTYPE html>
<html>
<body>
  <canvas id="ThisIsCanvas" width="150" height="150" style="border:2px solid #000000;">
    HTML5 canvas tag is unsupported in your browser.
  </canvas>
<script>
  var c = document.getElementById("ThisIsCanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(0, 0);
  ctx.lineTo(150, 150);
  ctx.stroke();
</script>
</body>
</html>

رسم دایره

<!DOCTYPE html>
<html>
<body>
  <canvas id="ThisIsCanvas" width="150" height="150" style="border: 2px solid #000000;">
    HTML5 canvas tag is unsupported in your browser.
  </canvas>
<script>
  var b = document.getElementById("ThisIsCanvas");
  var ctxx = b.getContext("2d");
  ctxx.beginPath();
  ctxx.arc(80, 70, 50, 0, 2*Math.PI);
  ctxx.stroke();
</script> 
</body>
</html>

رسم متن

<!DOCTYPE html>
<html>
<body>
  <canvas id="ThisIsCanvas" width="150" height="150" style="border: 2px solid #000000;">
    HTML5 canvas tag is unsupported in your browser.
  </canvas>
<script>
  var b = document.getElementById("ThisIsCanvas");
  var ctx = b.getContext("2d");
  ctx.font = "20px Arial";
  ctx.fillText("I am the Cube", 10, 75);
</script>
</body>
</html>

متن

<!DOCTYPE html>
<html>
<body>
  <canvas id="ThisIsCanvas" width="150" height="150" style="border: 2px solid #000000;">
    HTML5 canvas tag is unsupported in your browser.
  </canvas>
<script>
  var b = document.getElementById("ThisIsCanvas");
  var ctxx = b.getContext("2d");
  ctxx.font = "20px Arial";
  ctxx.strokeText("I am the Cube", 10, 75);
</script>
</body>

ایجاد یک گرادیان خطی

<!DOCTYPE html>
<html>
<body>
  <canvas id="ThisIsCanvas" width="150" height="150" style="border: 2px solid #000000;">
    HTML5 canvas tag is unsupported in your browser.
  </canvas>
<script>
  var b = document.getElementById("ThisIsCanvas");
  var ctx = b.getContext("2d");
  // Creating gradient
  var grad = ctx.createLinearGradient(0, 0, 160, 0);
  grad.addColorStop(0, "yellow");
  grad.addColorStop(1, "blue");
  // Filling with gradient
  ctx.fillStyle = grad;
  ctx.fillRect(10, 10, 130, 130);
</script>
</body>
</html>

ایجاد یک گرادیان دایره ای

<!DOCTYPE html>
<html>
<body>
  <canvas id="ThisIsCanvas" width="150" height="150" style="border: 2px solid #000000;">
    HTML5 canvas tag is unsupported in your browser.
  </canvas>
<script>
  var b = document.getElementById("ThisIsCanvas");
  var ctx = b.getContext("2d");
  // Create gradient
  var grad = ctx.createRadialGradient(80, 45, 5,  80,50, 90);
  grad.addColorStop(0, "yellow");
  grad.addColorStop(1, "blue");
  // Fill with gradient
  ctx.fillStyle = grad;
  ctx.fillRect(10, 10, 130, 130);
</script>
</body>
</html>

تصویر

<!DOCTYPE html>
<html>
<body>
  <p>Use this image:</p>
  <img id="dragon" src="image.png" alt="The Dragon">
  <p>To fill this canvas:</p>
  <canvas id="ThisIsCanvas" width="215" height="215" style="border: 2px solid #d3d3d3;">
    HTML5 canvas tag is unsupported in your browser.
  </canvas>
  <p><button onclick="ThisIsCanvas()">Press it</button></p>
<script>
function ThisIsCanvas() {
  var b = document.getElementById("ThisIsCanvas");
  var ctx = b.getContext("2d");
  var img = document.getElementById("dragon");
  ctx.drawImage(img, 0, 0);
}
</script>
</body>
</html>

نقاشی canvas خود را تهیه کنید

وقت آن است که کمی لذت ببریم! این مثال کد نسبت به بقیه که در این آموزش ساده HTML5 canvas مشاهده کردید ، کمی پیچیده تر است. با این حال ، این یک نمایش کامل از آنچه شما می توانید با استفاده از این عنصر بدست آورید است.

در آن ، می توانید با استفاده از نشانگر ماوس خود ، روی canvas نقاشی بکشید و آن را در رایانه خود بارگیری کنید:

var link = document.createElement('a');
link.innerHTML = 'Get this masterpiece!';
link.addEventListener('click', function (ev) {
  link.href = canvas.toDataURL();
  link.download = "masterpiece.png";
}, false);
document.body.appendChild(link);

نکات مهم آموزش Canvas در HTML

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

این مقاله چقدر براتون مفید بود؟

میانگین رتبه : 5/5 - تعداد رای : 1