davej Posted December 16, 2012 Share Posted December 16, 2012 (edited) http://www.w3schools...ialgradient.asp I'm having trouble using this. It seems to die if I try to use it on rectangles as they get longer. Edited December 16, 2012 by davej Link to comment Share on other sites More sharing options...
thescientist Posted December 25, 2012 Share Posted December 25, 2012 (edited) sample code? what edits are you making to the tryit example code? which browser? any errors in the console? Edited December 25, 2012 by thescientist Link to comment Share on other sites More sharing options...
davej Posted December 27, 2012 Author Share Posted December 27, 2012 (edited) Here is a sample. I think the rule I have been having trouble with is that apparently the "starting circle" must be positioned inside the area of the "ending circle." I thought I was having trouble because of the narrowness of the rectangle, but the rectangle size and proportions are quite irrelevant. <!DOCTYPE html><html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>Radial Gradient by Dave</title><style>#canvas1 { border: 1px solid #000;}</style><script src="jonerror.js"></script><script>function draw1() {var canvas = $('canvas1');var context = canvas.getContext('2d');context.clearRect(0, 0, canvas.width, canvas.height);var x0 = $('x0').value;var y0 = $('y0').value;var r0 = $('r0').value;var x1 = $('x1').value;var y1 = $('y1').value;var r1 = $('r1').value;var grad = context.createRadialGradient(x0, y0, r0, x1, y1, r1);grad.addColorStop(0, '#0ff'); // light blue-greengrad.addColorStop(1, '#003'); // dark bluecontext.fillStyle = grad;var xu = $('xupper').value;var yu = $('yupper').value;var w = $('width').value;var h = $('height').value;context.fillRect(xu, yu, w, h); //xupperleft,yupperleft,width,heightcontext.closePath();}function $(id) {return document.getElementById(id);}window.onload = function() {$('btndraw').onclick = draw1;}</script></head><body><canvas id="canvas1" width="800" height="600">HTML5 Canvas is not supported</canvas><br/>X:<input type="number" id="xupper" value="100" step="25"/>Y:<input type="number" id="yupper"value="100" step="25"/>W:<input type="number" id="width" value="600" step="25"/>H:<input type="number" id="height" value="400" step="25"/><input type="button" id="btndraw" value="Draw"/><br/>x-coordinate of the starting circle of the gradient:<input type="number" id="x0" value="300" step="25" /><br/>y-coordinate of the starting circle of the gradient:<input type="number" id="y0" value="300" step="25" /><br/>radius of the starting circle:<input type="number" id="r0" value="2" step="1" /><br/>x-coordinate of the ending circle of the gradient:<input type="number" id="x1" value="200" step="25" /><br/>y-coordinate of the ending circle of the gradient:<input type="number" id="y1" value="200" step="25" /><br/>radius of the ending circle:<input type="number" id="r1" value="200" step="10" /></body></html> Edited December 28, 2012 by davej Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now