طراحی وب

HTML5 Canvas

HTML5 Canvas  چیست ؟

آموزش گرافیک  html  درس اول

HTML5 Canvas  : عنصر  <canvas> برای رسم گرافیک در یک صفحه وب استفاده می شود.

HTML Canvas چیست؟

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

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

canvas دارای چندین روش برای رسم مسیرها، جعبه ها، حلقه ها، متن ها و اضافه کردن تصاویر است.

HTML5 Canvas
HTML5 Canvas

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

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

chrome:  ۴.۰

IE: 9.0

firefox : 2.0

safari : 3.1

opera :9.0

نمونه های canvas

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

نشانه گذاری  به شرح زیر است:

 &lt;canvas id="myCanvas" width="200" height="100"&gt;&lt;/canvas&gt; 

 

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

یک  canvas  خالی :

مثال :

 &lt;canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"&gt;
&lt;/canvas&gt; 

کشیدن یک خط :

مثال:

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

کشیدن یک دایره :

مثال :

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

کشیدن یک متن :

مثال :

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

کشیدن متن توخالی :

مثال :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",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); 

 

بیشتر بخوانید:

استارت‌آپ پولساز
برچسب ها

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

10 جلسه به همراه فایل صوتی و ویدیویی
همین حالا شروع کنید
تا امروز بیش از 4000 نفر در این دوره شرکت کرده‌اند
بستن پیام
بستن