18 Temmuz 2016 Pazartesi

HTML5 CANVAS LİNEAR GRADİENT KULLANIMI


<!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 benimtuval=document.getElementById("mycanvas");
       ctx=benimtuval.getContext("2d");
         var renk=ctx.createLinearGradient(0,0,200,200);  
         renk.addColorStop(0,"red");
         renk.addColorStop(0.5,"green");
         renk.addColorStop(0.7,"pink");
         renk.addColorStop(1,"yellow");
        ctx.fillStyle=renk;
        ctx.fillRect(0,0,300,300);
       
      }
       
     
    </script>

</head>

<body>
    <canvas id="mycanvas" height="400" width="600"></canvas>




</body>
</html>

Hiç yorum yok:

Yorum Gönder