ورود

View Full Version : canvas


olampiad
دوشنبه 13 مرداد 1393, 10:24 صبح
سلام و خسته نباشید ب اساتید
به این کد من ی نگا بندازید.
میشه یک بار ابن رو روی سیستم خودتون اجرا کنید.
میبینید من میخوام با استفاده از canvas یک تابلو ایست طراحی کنم.
حالا من میخوام ب دایره ای که درست کردم پس زمینه بدم.
هرکاری کردم نشد.
میشه در این مورد یکم راهنمایی کنید
در canvas چطور میتونم ب دایره پس زمینه بدم.
ممنون میشم.




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>

<canvas id="myCanvas" width="200" height="200" 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.arc(95,80,60,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle='blue';

ctx.font="20px Arial";
ctx.fillText('ایست',70,90);

ctx.fillRect(55,70,80,20);


</script>

</body>
</html>
SA_Developer
دوشنبه 13 مرداد 1393, 11:25 صبح
سلام این کدو امتحان کن:

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.arc(95,80,60,0,2*Math.PI);
ctx.stroke();

ctx.fillStyle='red';
ctx.fill();

ctx.fillStyle='blue';
ctx.fillRect(55,70,80,20);

ctx.fillStyle='white';
ctx.font="20px Arial";
ctx.fillText('ایست',75,87);

</script>
olampiad
دوشنبه 13 مرداد 1393, 18:00 عصر
تشکر فراوان از شما دوست گرامی بابت راهنمایی ها
به این تصویر من ی نگا بندازید
http://s5.picofile.com/file/8133438776/dsadsffdfght6.PNG
من کد زیر رو نوشتم ولی کارم مثل بالایی شد .
مشکل از کجاست؟
چ عاملی باعث این کار میشه؟
ممنون بابت راهنمایی ها.



var c=document.getElementById('mycanvas');
var ctx=c.getContext("2d");

ctx.arc(100,100,80,0,2*Math.PI);

ctx.fillStyle='red';
ctx.fill();


ctx.fillStyle='#fff';
ctx.fillRect(45,80,90,30);


ctx.fillStyle='#fff';
ctx.font='30px Arial';
ctx.fillText('stop',70,145);


ctx.fillStyle='#000';
ctx.font='17px Arial';
ctx.fillText('زمان شما ب پایان رسیده است',20,195);







<div id="mycanvass">
<div class="close_c">
بستن
</div>

<canvas id="mycanvas">

</canvas>
</div>






#mycanvass{
width:350px;
height:300px;
position:fixed;
top:130px;
left:500px;
background:#fff;
border:1px solid #CCC;
}

#mycanvas{
width:250px;
height:250px;
background:#CCC;
margin-top:35px;
margin-left:17px;
}

.close_c{
width:35px;
height:20px;
text-align:center;
background:#C00;
float:right;
border-radius:3px;
color:#FFF;
padding:3px;
font-size:14px;
font-weight:bold;
}