0

بلاگ

آموزشگاه ابراهیمی نژاد بلاگ مقالات زبانهای برنامه نویسی وب HTML canvas -بوم نقاشی در html

canvas -بوم نقاشی در html

14/05/1396
ارسال شده توسط
HTML ، جاوا اسکریپت ، طراحی ، وب
7.09k بازدید

کد استفاده شده در فیلم آموزشی که در پایین صفحه است را از اینجا میتوانید مطالعه کنید

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ebrahiminejad.com</title>
</head>

<body>

<canvas id="test" style="width:150px;height:150px;border:#14CED7 solid 1px;">
error
</canvas>

<script>
var x=document.getElementById("test");
var can=x.getContext("2d");

can.font="30px arial";
can.fillStyle="#ff0000";
can.fillText("<?PHP echo "ebrahiminezhad.com"; ?>",10,40);
can.strokeText("ebrahiminejad.com",10,80);

</script>

</body>
</html>

 

 

کشیدن خط در بوم نقاشی چگونه است؟

حال اگر بخواهیم در این بوم خط رسم کنیم باید به این شکل عمل کنیم

<canvas id="myCanvas" width="100" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 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>

 

اگر تا بحال دستورات جاوااسکریپت را ندیده‌اید نگران نباشید بسیار ساده است خدمتتون کد بالا را توضیح میدم

با باز کردن تگ script مرورگر را متوجه این میکنیم که میخواهیم از دستورات جاوا اسکریپت استفاده کنیم  <script>  خط اول

در خط دوم یک متغییر با نام c میسازیم که در ان المان بوم نقاشی را با استفاده از id  پیدا کرده و بدست میگیریم

در داخل پرانتز

 getElementById("ای دی بوم نقاشی را اینجا بنویسید")

 

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

در خط بعد میگوییم نقطه ی 0 و 0 که بالا سمت چپ شکلمان میشود نقطه ی شروع باشد

در خط بعد میگوید یک خط از نقطه ی شروع تا نقظه ی 100 و 100 شکل رسم شود

در خط بعد میگوید که باید این خط رسم شود

 

کشیدن دایره

برای کشیدن دایر باید در بوم خود چنین عمل کنیم

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(55,50,40,0,2*Math.PI);
ctx.stroke();

 

 

 

نوشتن در بوم و گرفتن خروجی عکس

 

دو خط اول که مانند قبل است با ایدی المانمان را مشخص میکنیم و یک شی از ان میسازیم در خط سوم سایز نوشته و فونت ان را با فونت مشخص میکنیم و در خط بعد هم متن را مشخص میکنیم و دو عدد بعد هم اولی که اینجا 10 هست برای فاصله از سمت چپ و دومی فاصله از بالای تصویر است  که در مثال زیر 50 میباشد

 

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 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>

 

استایل دهی به نوشته در بوم نقاشی

به راحتی میتوانید متن را توخالی کنید فقط کافیه در خط اخر بجای filltxt از stroketext استفاده کنید به همین راحتی.

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
ctx.font = "22px Arial";
ctx.strokeText("ebrahiminezhad.ir",10,50);

 

 

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

 

 

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

 

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

 

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

 

ترسیم یک عکس

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);

 

 

برچسب ها:

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

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