18 Temmuz 2016 Pazartesi

HTML5 CANVAS BEZİERCURVETO ÖZELLİĞİ


<!DOCTYPE html>
<html>
    <head>
        <style>
            canvas{

                border:1px solid #d3d3d3;
                /*    background-color: #000;*/
                canvas {
                    cursor:none;
                }
            }
        </style>
    <script>
        window.onload = function () {
            benimtuval=document.getElementById("mycanvas");
            ctx=benimtuval.getContext("2d");
          ctx.beginPath();
          ctx.moveTo(0,0);
//          ctx.lineTo(50,150);
//          ctx.lineTo(142,100);
//          ctx.lineTo(150,85);
          ctx.bezierCurveTo(50,150,142,100,150,200);/*çizgileri oval şekle getirir.*/
          ctx.stroke();
          ctx.beginPath();
          ctx.arc(150,200,20,0*Math.PI,2*Math.PI);
          ctx.fill();
    }


    </script>


</head>
<body>
<img id="resim" src="ari.png" style="display:none"/>
<canvas id="mycanvas" onmousemove="eylem(event)" width="600" height="400" >
        Your browser does not support the HTML5 canvas tag.</canvas>



</body>
</html>

Hiç yorum yok:

Yorum Gönder