<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="200" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="# 000000";
ctx.fillRect(10,10,250,150);
</script>
</body>
</html>
---------------------------
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="300" 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.moveTo(0,0); /*0a 0dan 100 300 e çizgi çiz diyoz.*/
ctx.lineTo(100,300);
ctx.stroke();
</script>
</body>
</html>
----------------------
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" 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.beginPath();
ctx.fillStyle="#000000";
ctx.arc(95,50,50,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
-------------------------
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas{
border:2px solid #999;
background-color: #f63;/*canvasın arkasına renk verdik.*/
}
</style>
<script>
window.onload=function(){
var mycanvas=document.getElementById("mycanvas");
ctx=mycanvas.getContext("2d");
ctx.fillStyle="green";/*dikdörtgenin rengini verdik*/
ctx.fillRect(100,25,100,200);/*x,y,genişlik,yükseklik*/
}
</script>
</head>
<body>
<canvas id="mycanvas" height="400" width="600"></canvas>
</body>
</html>
------------------------------
<html>
<head>
<title>JavaScript onLoad Olay tutucu örneği</title>
<style>
canvas{
border:2px solid #999;
}
</style>
<script type="text/javascript">
window.onload=function()
{
mycanvas=document.getElementById("mycanvas");
ctx=mycanvas.getContext("2d");
yukseklik=20;
genislik=20;
ctx.fillStyle="blue";
for(var a=0;a<60;a++){
x=200*Math.random();
y=200*Math.random();
ctx.fillRect(x,y,genislik,yukseklik);
}
}
function eylem(){
mycanvas=document.getElementById("mycanvas");
ctx=mycanvas.getContext("2d");
yukseklik=20;
genislik=20;
ctx.fillStyle="blue";
for(var a=0;a<60;a++){
ctx.clearRect(0,0,600,400);/*canvası siliyoruz.*/
x=200*Math.random();
y=200*Math.random();
ctx.fillRect(x,y,genislik,yukseklik);
}
}
setInterval(eylem,50);
</script>
</head>
<body>
<canvas id="mycanvas" width="600" height="400" ></canvas>
</body>
</html>
--------------------------------
<html>
<head>
<title>JavaScript onLoad Olay tutucu örneği</title>
<style>
canvas{
border:2px solid #999;
}
</style>
<script type="text/javascript">
window.onload=function()
{
mycanvas=document.getElementById("mycanvas");
ctx=mycanvas.getContext("2d");
yukseklik=20;
genislik=20;
ctx.fillStyle="blue";
ctx.fillRect(30,20,genislik,yukseklik);
// ctx.clearRect(0,0,600,400);/*canvası siler.*/
}
</script>
</head>
<body>
<canvas id="mycanvas" width="600" height="400" ></canvas>
</body>
</html>
------------------------------------
<html>
<head>
<title>JavaScript onLoad Olay tutucu örneği</title>
<style>
canvas{
border:2px solid #999;
}
</style>
<script type="text/javascript">
window.onload=function()
{
mycanvas=document.getElementById("mycanvas");
ctx=mycanvas.getContext("2d");
ctx.beginPath();/*yolu başlatıyoruz.*/
ctx.lineWidth="30";
ctx.strokeStyle="red";
ctx.lineJoin="round";//bevel round miter(köşeyi kırpıyor) yuvarlıyor.
ctx.moveTo(0,0);/*başlangıç konumunu veriyoruz.*/
ctx.lineTo(200,200);/*bitiş konumunu veriyoruz.*/
ctx.lineTo(200,45);/*bitiş konumunu veriyoruz.*/
ctx.lineTo(85,210);/*bitiş konumunu veriyoruz.*/
// ctx.closePath();/*enson çizgiyi birleştirir.*/
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="mycanvas" width="600" height="400" ></canvas>
</body>
</html>
------------------------------------
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas{
border:2px solid #999;
}
</style>
<script>
window.onload=function(){
var mycanvas=document.getElementById("mycanvas");
ctx=mycanvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle="red";
ctx.arc(200,200,100,0*Math.PI,2*Math.PI);/*x,y,yarıçap,başlangıç açısı,bitiş açısı*/
ctx.fill();
}
</script>
</head>
<body>
<canvas id="mycanvas" height="400" width="600"></canvas>
</body>
</html>
Hiç yorum yok:
Yorum Gönder