0
آموزش کار با Canvas در HTML5 قسمت چهارم
کار با پراپرتی ها در Canvas
در ادامه آموزش های Canvas به مفهوم پراپرتی ها خواهیم پرداخت.
انوع پراپرتی ها در Canvas
پراپرتی lineWidth
یک مقدار دریافت می کند و ضخامت خط را مشخص می کند.
پراپرتی lineCap
این پراپرتی سه مقدار دریافت می کند
Butt مقدار پیش فرض
round گوشه های خط ها را گرد می کند و طول خط هم کمی افزایش پیدا می کند.
squer گوشه های خط را مربع شکل می کند و تفاوت آن با حالت پیش فرض این است که یک مقدا به آخر خط ها اضافه می کند.
پراپرتی lineJoin
این پراپرتی سه مقدار را دریافت می کند.
miter حال پیش فرض
round الصاق یا اتصال دو خط را گرد می کند
bevel الصاق یا اتصال دو خط را اریب می کند.
مثال
<!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.moveTo(100, 100);
c.lineTo(200, 200);
c.lineTo(300, 100);
c.lineWidth = 5;
c.lineCap = "butt";
c.lineCap = "round";
c.lineCap = "squer";
c.lineJoin = "miter";
c.lineJoin = "round";
c.lineJoin = "bevel";
c.fill();
c.closePath();
c.stroke();
</script>
</body>
</html>
خروجی
مت fill()
این متد داخل شکل را با رنگ سیاه پر می کند.
پراپرتی strokeStyle
با استفاده از این پراپرتی می توانیم رنگ خط ها را مشخص کنیم. و به روش های که که در CSS رنک به تگ ها اعمال می کنیم در اینجا هم می توانیم استفاده کنیم.
پراپرتی fillStyle
با این پراپرتی می توانیم رنگ داخل شکل را که توسط متد fill() پر می کنیم مشخص کنیم.
مثال
<!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(100, 100, 200, 100);
c.lineWidth = 5;
//c.strokeStyle = "red";
//c.strokeStyle = "#102030";
//c.strokeStyle = "rgb(10,60,200";
c.strokeStyle = "rgba(10,60,200,0.3";
//c.strokeStyle = "hsl(70,60%,10%)";
//c.strokeStyle = "hsla(70,60%,10%,0.5)";
c.fillStyle = "blue";
c.fill();
c.stroke();
</script>
</body>
</html>
خروجی
این مطلب را به اشتراک بگذارید...
نظر / سوال