100% کامل شده تا

بوم نقاشی در اچ‌تی‌ام‌ال (HTML Canvas Graphics)

از موتو کد، دانشنامهٔ برنامه‌نویسی


عنصر <canvas> در HTML برای ترسیم‌های گرافیکی در یک صفحه به کار می‌رود


HTML5 Canvas.png

شکل گرافیکی سمت راست با <canvas> کشیده شده‌است و چهار عنصر را نشان می‌دهد: مستطیل قرمز، مستطیل گرادیان (سایه روشن)، مستطیل چند رنگ، و یک متن چند رنگ..[۱]



HTML Canvas چیست؟

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

عنصر <canvas> تنها ظرف برای گرافیک است. در عمل برای ترسیم اشکال گرافیکی باید از جاوا اسکریپت استفاده کنید.

Canvas متدهای بسیاری برای ترسیم مسیرها، کادرها، دایره‌ها، متن و اضافه‌کردن تصاویر دارد.



پشتیبانی مرورگر

اعداد در جدول زیر اولین نسخهٔ مرورگرها را که به‌طور کامل از عنصر <canvas> پشتیبانی می‌کنند را مشخص می‌کند.

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<canvas> ۴٫۰ ۹٫۰ ۲٫۰ ۳٫۱ ۹٫۰


مثال‌هایی از Canvas

Canvas یک ناحیه مستطیلی در صفحه HTML است. به‌طور پیش‌فرض، یک canvas هیچ محتوا و کادری ندارد.

نشانه‌گذاری آن به شکل زیر است:

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


توجه: همیشه ویژگی id را مشخص کنید (تا در اسکریپت به آن ارجاع داده شود) و ویژگی‌های width و height برای تعریف اندازه canvas. برای اضافه‌کردن کادر، از ویژگی style استفاده کنید.

در ادامه مثالی از یک canvas پایه و خالی آمده‌است:

مثال
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

Responsive demo.svg





جاوا اسکریپت اضافه کنید

پس از ایجاد ناحیهٔ canvas مستطیلی، باید یک جاوا اسکریپت برای ادامهٔ طراحی اضافه کنید.

در اینجا چند نمونه آورده شده‌است:



رسم یک خط

مثال
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

مثال
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

</body>
</html>

Responsive demo.svg



رسم یک دایره

مثال
<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>

مثال
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<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> 

</body>
</html>

Responsive demo.svg



رسم یک متن

مثال
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

مثال
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>

</body>
</html>

Responsive demo.svg



متن Stroke

مثال
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>

مثال
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
</script>

</body>
</html>

Responsive demo.svg



رسم یک گرادیان خطی

مثال
<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>

مثال
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<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>

</body>
</html>

Responsive demo.svg



رسم یک گرادیان دایره ای

مثال
<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>

مثال
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<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>

</body>
</html>

Responsive demo.svg



رسم یک تصویر

مثال
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>

مثال
<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">

<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<p><button onclick="myCanvas()">Try it</button></p>

<script>
function myCanvas() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img,10,10);
}
</script>

</body>
</html>

Responsive demo.svg



آموزش HTML Canvas

برای یادگیری کامل <canvas> در HTML، به آموزش HTML Canvas کامل ما مراجعه کنید.

منابع آموزشی




به‌روزرسانی شده: ۲۰ روز پیش