جستجو برای:
  • صفحه اصلی
  • تجرببه ی جدید ! اپلیکیشن را امتحان کنید
  • دوره ها
    • حساب کاربری
    • سبد خرید
  • بلاگ
اپلیکیشن موبایل را امتحان کنید
  • 021226465496
  • info@ebrahiminejad.com
  • صفحه اصلی
  • تجرببه ی جدید ! اپلیکیشن را امتحان کنید
  • دوره ها
    • حساب کاربری
    • سبد خرید
  • بلاگ
آموزشگاه ابراهیمی نژاد
  • صفحه اصلی
  • مقالات
    • برنامه نویسی
      • جاوا اسکریپت
      • php
      • python
    • طراحی
      • HTML
      • CSS
      • bootstrap
      • طراحی بدون کد نویسی
      • فتوشاپ
    • متفرقه
      • متفرقه
  • دوره ها
    • محصولات
    • سفارشات من
    • دانلودهای من
    • آدرس ها
    • جزئیات حساب
    • فراموشی گذرواژه
  • فرخ ابراهیمی
  • تماس با ما
  • اخبار
  • اپلیکیشن
0

ورود و ثبت نام

بلاگ

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

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

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

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

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


 

 

برچسب ها: canvasHTMLبومکدمتننقاشی

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

قالب سایت چیست ؟
رسپانسیو در css حرفه ای
AJAX با PHP
5 دلیل که چرا باید php را یادگرفت
آموزش تگ svg
آموزش svg در html
اموزش جاوا اسکریپت – switch قسمت 6 (شرط‌ها)
قدیمی تر 2 پالت رنگ حرفه‌ای در طراحی کدامند؟
جدیدتر در صندلی داغ سابق (تاک شو جدید) چه گذشت؟

دیدگاهتان را بنویسید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.

translate
جستجو برای:
پیشنهاد ویژه به شما
محصولات
  • دوره‌ی نخبه‌ی طراحی و برنامه نویسی وب
  • دوره‌ی Web Design 1 فشرده
  • دوره طراحی سایت
  • اموزش برنامه نویسی برای کودکان
    آموزش برنامه نویسی برای نوجوانان دوره از راه دور و آنلاین
  • دوره ی آموزشی 0 تا 100 php و mysql
  • دوره آموزش ساخت vpn سرور شخصی
  • دوره ی آموزش 0 تا 100 پایتون
دسته بندی دوره ها
سطح دوره
نوع دوره
فیلتر انتخاب ها
مفید برای تو
برای برنامه نویس شدن از کجا شروع کنم؟
جشنواره

شانستو امتحان کن

کلیک کن

  • تهران قلهک بلوار کاوه کوچه بهار جنوبی ساختمان آکسا
  • 09120156737
  • 0212264547
  • info@ebrahiminejad.com
دسترسی سریع
  • صفحه اصلی
  • دوره ها
  • حساب کاربری
  • سبد خرید
  • پرداخت
  • جداول قیمت گذاری

تمامی حقوق برای فرخ ابراهیمی‌نژاد محفوظ می باشد.
ما اگه شانس داشتیم اصلا نمیخوام!
تخفیف 30%
پوچ
دفعه ديگه .
تخفیف 40%
کد تخفیف 50%
کد تخفیف 20%
پوچ
امروز خوش شانس نبودی
شانست رو برای بردن امتحان کن!

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

امیدوارم ببری ولی

در صورت تقلب جوایز به شما تعلق نمیگیرد

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

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت