createLinearGradient() to draw linear colour gradients



Show line showing Gradient Path (x1,y1,x2,y2)

Click the colour table below ( select two ) for gradient colours

Rectangle Position

Linear Gradient Positions



Start Colour End Colour
my_gradient=gctx.createLinearGradient(x1,y1,x2,y2);
x1: X- Axis, Start Position from left edge of the canvas,
y1: Y- Asix, Start Position from Top edge of the canvas,
x2: X- Axis, End Position from left edge of the canvas,
y2: Y- Asix, End Position from Top edge of the canvas,
var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
gctx.beginPath();
my_gradient=gctx.createLinearGradient(20,20,380,150);
my_gradient.addColorStop(0,'#f50000');
my_gradient.addColorStop(1,'#8cf5f5');
gctx.fillStyle=my_gradient;
gctx.fillRect(20,20,150,180);
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.




HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer