آموزش canvas در HTML

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

آموزش canvas در HTML فضای نقاشی با اندازه ثابت را فراهم می کند که در آن می توانید با استفاده از JavaScript نقاشی کنید.

آموزش 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 استفاده کنید.

کار با canvas

شما باید با 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 نقاشی را پاک می کند.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

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

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