Drawing a 'bullseye' in HTML5 Canvas using javascript
Question
I'm struggling a bit to get this to work. I have a 'Canvas' element on my web page, and I need to 'draw' filled circles within each other. I need to use a loop to draw the pattern, alternating between red and blue filled circles. It will use the initial band width value of 25. It will repeat the loop as long as the current radius is greater than 0. It will use a slider to control the band width. The slider has a minimum value of 5, maximum value of 50 with step 5, and current value as 25. As the value of the slider changes, it draws the pattern with the current bandwidth. I can make this work with gradients, but that does not do what I need it to do and it does not look right. Here is what I have so far:
var sliderModule = (function(win, doc) { win.onload = init; // canvas and context variables var context; // center of the pattern var centerX, centerY; function init() { canvas = doc.getElementById("canvas"); context = canvas.getContext("2d"); centerX = canvas.width / 2; centerY = canvas.height / 2; // draw the initial pattern //drawPattern(); } // called whenever the slider value changes function drawPattern() { var canvas; // clear the drawing area context.clearRect(0, 0, canvas.width, canvas.height); // get the current radius var radius = doc.getElementById("radius").value; // set fill color to red const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); const colors = ['#F00', '#0F0', '#00F']; const outerRadius = 100; let bandSize = 10; // this would be where you put the value for your slider for (let r = outerRadius, colorIndex = 0; r > 0; r -= bandSize, colorIndex = (colorIndex + 1) % colors.length) { ctx.fillStyle = colors[colorIndex]; ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); } } return { drawPattern: drawPattern }; }) (window, document);
<!doctype html> <html> <head> <title></title> <meta charset="utf-8"> <script src="bullsEye.js"></script> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <label for="bandwidth">BandWidth:</label> <input type="range" id="radius" min="5" max="50" step="5" value="25" oninput="sliderModule.drawPattern()" /> </body> </html>
var sliderModule = (function(win, doc) {
win.onload = init;
// canvas and context variables
var canvas;
var context;
// center of the pattern
var centerX, centerY;
function init() {
canvas = doc.getElementById("testCanvas");
context = canvas.getContext("2d");
centerX = canvas.width / 2;
centerY = canvas.height / 2;
// draw the initial pattern
drawPattern();
}
// called whenever the slider value changes
function drawPattern() {
// clear the drawing area
context.clearRect(0, 0, canvas.width, canvas.height);
// get the current radius
var radius = doc.getElementById("radius").value;
// set fill color to red
context.fillStyle = '#FF0000';
// draw the pattern
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
context.fill();
context.closePath();
}
return {
drawPattern: drawPattern
};
})(window, document);
1 answers
solution1
0 2017-07-10 19:50:06
Your snippet doesn't quite work as provided, but given a value for your slider, you'll just reduce radius and loop while radius is greater than 0.
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 200; canvas.height = 200; const colors = ['#F00', '#0F0', '#00F']; const outerRadius = 100; let bandSize = 10; // this would be where you put the value for your slider for (let r = outerRadius, colorIndex = 0; r > 0; r -= bandSize, colorIndex = (colorIndex + 1) % colors.length) { ctx.fillStyle = colors[colorIndex]; ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); }
<canvas />
What you're missing is the loop which would change. To control the colors, I made an array, and in addition to changing my radius each for-loop iterator, I also change the colorIndex .
I use (colorIndex + 1) % colorIndex.length so it'll loop through each of them and not go beyond the index (it'll count 0 , 1 , 2 , and back to 0 ). You can change or add colors to the array.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.