Howabout we look at a few new ideas? Maybe a colour gradient (similar to a raster bar), but with a difference.
A gradient is a background colour effect applied to a canvas.
(Although we COULD make a small canvas of for example 60 pixels high, and fill it will a gradient background, and then when drawn onto our "main" canvas, it would look like an old school raster bar).
First we need to call a new script in the <script> section of our page, as we need to load the "codef_gradient" script.
So, look for the following line in your code...
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_core.js"></script>
...and then ADD this line afterwards.
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_gradient.js"></script>
Now we are calling the correct scripts, we can begin to create our gradient background effect!
After the line where you create the canvas, add the following...
var mygrad;
var mygradcolor=[
{color: 'rgb(0,0,0)', offset:0},
{color: 'rgb(0,0,255)', offset:0.25},
{color: 'rgb(0,0,0)', offset:0.5},
{color: 'rgb(0,0,255)', offset:0.75},
{color: 'rgb(0,0,0)', offset:1}
]
This has now defined a variable for our new gradient, and then created a data array which details the colours used, and how these are proportioned across the effect.
The {color: 'rgb(0,0,0)', offset:X} command is built up from these "sub-commands":
{color: 'rgb(X,X,X)' - change the X values to reflect the RGB colours required for each section of the effect. For example 0,0,0 = black and 0,0,255 = blue.
HERE is a link to a useful site which details the RGB values as numeric and HEX codes.
offset:Y}, - change the value of Y to reflect the position of the colour phase within the gradient.
As you can see in the example code (above), the position MUST begin with :0, and MUST end with :1, and the number of phases between can be 0.1, 0.2,0.3 etc. or as used here, 0.25,0.5,0.75 etc..
Have a play with the code and see what effects you can achieve with different colours and phases.
Next in the INIT section, we need to define the gradient itself as an effect, which is done with this command.
mygrad=new grad(mycanvas,mygradcolor);
This is using the variable we assigned earlier, in this case 'mygrad', and we are linking it to the command "new grad", then we define WHICH canvas we wish to apply it to - in our example it is the "main" canvas 'mycanvas', and finally we point to the colour array we defined as 'mygradcolor'.
Finally we can call the effect in the GO section, using this command...
mygrad.drawV();
This is calling the command, and drawing it onto the canvas we defined earlier.
the drawV command draws the gradient VERTICALLY, where as the drawH command will draw it HORIZONTALLY.
Below is the code for the whole example, which can be seen in action HERE.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_core.js"></script>
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_gradient.js"></script>
<script>
var mycanvas;
var logo=new image('../files/logo.gif');
var mygrad;
var mygradcolor=[
{color: 'rgb(0,0,0)' , offset:0},
{color: 'rgb(0,0,255)', offset:0.25},
{color: 'rgb(0,0,0)' , offset:0.5},
{color: 'rgb(0,0,255)', offset:0.75},
{color: 'rgb(0,0,0)' , offset:1}
];
function init(){
mycanvas=new canvas(640,480,"main");
mygrad=new grad(mycanvas,mygradcolor);
logo.setmidhandle();
go();
}
function go(){
mycanvas.fill('#000000');
mygrad.drawV();
logo.draw(mycanvas,320,240);
requestAnimFrame( go );
}
</script>
</head>
<body onLoad="init();">
<body bgcolor="#FFFFFF">
<br>
<center>
<div id="main"></div><br><br>
<a href="javascript:window.location='view-source:'+window.location">View Source</a>
</center>
</body>
</html>
No comments:
Post a Comment