Canvas Element <canvas>

We can make linear gradients on the canvas using createLinearGradient() method. These gradients are defined by certain imaginary lines which decide the direction of the gradient. For making our gradient, we first need to make a closed shape, which can be made by joining a number of curves as discussed previously. Only point to worry about is that context point of successive image should be same as the end point of the preceding one. Lets see how it can be done.

Your browser does not support the canvas element.
window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    context.moveTo(100, 50);
    context.bezierCurveTo(100, 70, 110, 120, 210, 140);
    context.bezierCurveTo(250, 180, 320, 180, 340, 150);
    context.bezierCurveTo(430, 40, 370, 30, 340, 50);
    context.bezierCurveTo(200, 5, 150, 20, 100, 50);
    context.closePath(); 
	context.lineWidth = 5;
    context.strokeStyle = "#fab704";
    context.stroke();
};

So, we can make a closed curve using as many curves as we wish. In the example above, we made a closed path using four bezier curve. Once, we have made the closed shape, lets add some gradient to it. To create a linear gradient, we use the createLinearGradient() method. Linear gradients are defined by imaginary lines which define the direction of the gradient. We can add colors at the end using addColorStop property.

Your browser does not support the canvas element.
var grd = context.createLinearGradient(100, 0, 370, 200);
grd.addColorStop(0, "#e1bd5b"); 
grd.addColorStop(1, "orange"); 
context.fillStyle = grd;
context.fill();

createLinearGradient() takes four arguments which is basically the starting and ending coordinates of the imaginary line. Besides colorStop are used anywhere in the shape as per our wish. The first argument which is a value between 0 to 1 decides where in the image we wish to put the colorStop. Once, everything is done, our linear gradient is ready.

Do you know HTML5 can store data on the client as well. Lets see how :-

Member Login

Member Login




Not a Member? Sign Up!




Login to comment

Be the first to comment on this topic







  


<<< Wanna review

Continue >>>