Jump to content

HTML5 radialGradient problem


davej
 Share

Recommended Posts

  • 2 weeks later...

sample code? what edits are you making to the tryit example code? which browser? any errors in the console?

Edited by thescientist
Link to comment
Share on other sites

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 by davej
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...