18 Temmuz 2016 Pazartesi
HTML5 CANVAS DAİRESEL GRAFİK ÇİZİMİ
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.test{
border:2px solid #eee;
width:20px;
height:20px;
display:inline-block;
}
canvas{
background-color: #eee;
border:2px solid dotted;
border:2px solid #d3d3d3;
/* background-color: #000;*/
}
#gosterge{
position:absolute;
top:380px;
left:50px;
}
</style>
<script>
window.onload = function () {
var angle=Math.PI/180;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var domates=120;//red
var patates=180;//sarı
var patlican=60;//black
var sayi=0;
function eylem(){
if(sayi>=360){
clearInterval(saydir);
ctx.beginPath();
ctx.arc(200,200,20,0*Math.PI,2*Math.PI);
ctx.fill();
ctx.beginPath();
ctx.strokeStyle="blue";
ctx.arc(200,200,100,0*Math.PI,2*Math.PI);
ctx.stroke();
}
if(sayi<=domates){
ctx.fillStyle="red";
}
else if(sayi>domates && sayi<=patates+domates){
ctx.fillStyle="yellow";
}
else{
ctx.fillStyle="black";
}
// ctx.clearRect(0,0,400,400);
ctx.translate(200,200);
ctx.rotate(angle);
ctx.translate(-200,-200);
ctx.fillRect(200,200,2,100);
sayi+=1;
}
saydir=setInterval(eylem,5);
}
</script>
</head>
<body>
<canvas id="canvas" height="400" width="400" >
Your browser does not support the HTML5 canvas tag.</canvas>
<div id="gosterge">
<div style="background-color:red" class="test"></div>domates 120
<div style="background:yellow" class="test"></div>patates 150
<div style="background:black" class="test"></div>patlıcan 90
</div>
</body>
</html>
Kaydol:
Kayıt Yorumları (Atom)
Hiç yorum yok:
Yorum Gönder