07_Gradient.html
Dosyayı İndir
<!DOCTYPE html>
<html>
<body>
<canvas id="mycanvas" width="300" height="240" style="border: 1px solid blue">
</canvas>
<script>
var mycanvas = document.getElementById('mycanvas');
var mycontext=mycanvas.getContext("2d");
var linear = mycontext.createLinearGradient(25,0,125,0);
linear.addColorStop(0, '#0000FF');
linear.addColorStop(0.25, '#AAAAAA');
linear.addColorStop(0.5, '#FFFF00');
linear.addColorStop(0.75, '#AAAAAA');
linear.addColorStop(1, '#0000FF');
mycontext.fillStyle = linear;
mycontext.strokeStyle = linear;
mycontext.fillRect(25,25,100,80);
var radial = mycontext.createRadialGradient(195,175,0,195,175,50);
radial.addColorStop(0, '#FFFF00');
radial.addColorStop(0.5, '#0000FF');
radial.addColorStop(1, '#FFFFFF');
mycontext.fillStyle = radial;
mycontext.strokeStyle = radial;
mycontext.fillRect(125,125,140,100);
</script>
</body>
</html>
Dosyayı İndir 