0
0
آموزش کار با Canvas در HTML5 قسمت سوم
آموزش کار با Canvas در HTML5 قسمت سوم
در ادامه آموزش Canvas به بررسی متدهای دیگر رسم اشکال هندسی می پردازیم.
متد rect()
این متد چهار ورودی دریافت می کند و یک مستطیل رسم می کند.
- ورودی اول: مختصات x برای رسم مستطیل
- ورودی دوم: مختصات y برای رسم مستطیل
- ورودی سوم : طول مستطیل
- ورودی چهارم: عرض مستطیل
رسم مستطیل
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> canvas { background-color: #fff; } </style> </head> <body> <div> <canvas width="600" height="600" id="canvas"></canvas> </div> <script type="text/javascript" language="javascript"> var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); c.beginPath(); c.rect(300,300,200,100); c.stroke(); </script> </body> </html>
خروجی
تابع رسم دایره
arc(x,y,RADIUS,START ANGLE,END ANGLE,ANIT CLOCKWISE(TRUE/FALSE))
متد arc برای ما یک دایره رسم می کند.
x و y مرکز دایره را مشخص می کند. )یعنی شروع رسم دایره را مشخص می کند(
RADIUS شعاع دایره را مشخص می کند.
START ANGLE و END ANGLE شروع و پایان زاویه را مشخص می کند.
ANIT CLOCKWISE(TRUE/FALSE) دو حالت True و False دارد. True به معنی پاد ساعتگرد و False به معنی ساعتگرد. و حالت پیشفرض آن نیز False می باشد.
رسم دایره کامل
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> canvas { background-color: #fff; } </style> </head> <body> <div> <canvas width="600" height="600" id="canvas"></canvas> </div> <script type="text/javascript" language="javascript"> var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); c.beginPath(); //c.arc(XDomainRequest,y,RADIUS,START ANGLE,END ANGLE,ANIT CLOCKWISE(TRUE/FALSE)); c.arc(200, 200, 50, 0, Math.PI * 2); c.stroke(); </script> </body> </html>
خروجی
نکته:
Math.PI از توابع ریاضی می باشد یعنی 3.14
رسم سه چهارم دایره
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> canvas { background-color: #fff; } </style> </head> <body> <div> <canvas width="600" height="600" id="canvas"></canvas> </div> <script type="text/javascript" language="javascript"> var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); c.beginPath(); c.arc(200, 200, 50, 0, Math.PI * 1.5); c.stroke(); </script> </body> </html>
خروجی
رسم یک چهار دایره به صورت پادساعتگرد
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> canvas { background-color: #fff; } </style> </head> <body> <div> <canvas width="600" height="600" id="canvas"></canvas> </div> <script type="text/javascript" language="javascript"> var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); c.beginPath(); c.arc(200, 200, 50, 0, Math.PI * 1.5, true); c.stroke(); </script> </body> </html>
خروجی
رسم یک دوم دایره
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> canvas { background-color: #fff; } </style> </head> <body> <div> <canvas width="600" height="600" id="canvas"></canvas> </div> <script type="text/javascript" language="javascript"> var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); c.beginPath(); c.arc(100, 100, 50, 0, Math.PI); c.stroke(); </script> </body> </html>
خروجی
رسم یک دوم دایره به صورت پادساعتگرد
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> canvas { background-color: #fff; } </style> </head> <body> <div> <canvas width="600" height="600" id="canvas"></canvas> </div> <script type="text/javascript" language="javascript"> var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); c.beginPath(); c.arc(100, 100, 50, 0, Math.PI, true); c.stroke(); </script> </body> </html>
خروجی
رسم یک چهار دایره
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> canvas { background-color: #fff; } </style> </head> <body> <div> <canvas width="600" height="600" id="canvas"></canvas> </div> <script type="text/javascript" language="javascript"> var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); c.beginPath(); c.arc(50, 50, 50, 0, Math.PI / 2); c.stroke(); </script> </body> </html>
خروجی
نظر / سوال