0
0
0
آموزش کار با Canvas در HTML5 قسمت نهم
آموزش کار با Canvas در HTML5 قسمت نهم
در آخرین قسمت از آموزش کار با Canvas به معرفی چند پراپرتی و متدهای کار با متن می پردازیم.
پراپرتی font
با این پراپرتی می توان یک فوت به متن اختصاص داد و ورودی های آن به صورت زیر می باشد
(font-style , font-weight , font-size , font-family)
پراپرتی textAlign
با این پراپرتی می توان ترازبندی متن را مشخص کرد.
متد fillText()
این متد یک متن را نمایش می دهد و چهار ورودی دارد.
ورودی اول: متن مورد نظر
ورودی دوم: مختصات x
ورودی سوم: مختصات y
ورودی چهارم: عرض متن را مشخص می کند
متد strokeText()
کار این متد همانند متد fillText() است با این تفاوت که نوشته را به صورت توپر نمایش نمی دهد.
<!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.fillStyle = "blue";
c.strokeSty = "red";
c.lineWidth = 2;
c.font = "normal normal 80px 'Arial'";
c.textAlign = "center";
c.fillText("iranganj", 150, 500);
c.strokeText("iranganj", 150, 500);
c.strokeText("iranganj", 150, 400);
</script>
</body>
</html>
خروجی
این مطلب را به اشتراک بگذارید...
نظر / سوال