<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width:100px;
height:100px;
margin:0px auto;
}
</style>
</head>
<body id = "test">
<canvas id = "mycanvas" width="600" height="600"></canvas>
<script type = "text/javascript">
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Create Linear Gradients
var lingrad = ctx.createLinearGradient(0,0,0,190);
lingrad.addColorStop(0,"white");
lingrad.addColorStop(0.6,"lightblue");
lingrad.addColorStop(1,"green");
// assign gradients to fill and stroke styles
ctx.fillStyle = lingrad;
// draw shapes
ctx.fillRect(25,25,500,200);
var radialgrd= ctx.createRadialGradient(100,80,30, 120,100,5);
radialgrd.addColorStop(0,"orange");
radialgrd.addColorStop(0.6,"yellow");
radialgrd.addColorStop(1,"white");
ctx.beginPath();
ctx.fillStyle=radialgrd;
ctx.arc(100, 80, 30,0, 2*Math.PI);
ctx.fill();
</script>
</body>
</html>
0 Comments