使用JavaScript在HTML5 Canvas中绘制“靶心”

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. 它将使用初始带宽值25。只要当前半径大于0，它将重复循环。它将使用滑块控制带宽。 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. 滑块的最小值为5，第5步的最大值为50，当前值为25。随着滑块的值变化，它将以当前带宽绘制图案。 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);

Answer 1

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. 您的代码段不能完全按照所提供的方式工作，但是如果给定滑块的值，则可以在半径大于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 . 为了控制颜色，我创建了一个数组，除了更改每个for循环迭代器的半径之外，还更改了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 ). 我用(colorIndex + 1) % colorIndex.length所以它会通过他们每个人的循环，而不是超越指数（它会算0 ， 1 ， 2 ，再回到0 ）。 You can change or add colors to the array. 您可以更改颜色或为数组添加颜色。

使用JavaScript在HTML5 Canvas中绘制“靶心”

问题描述

1 个解决方案

解决方案1
0 2017-07-10 19:50:06

使用JavaScript在HTML5 Canvas中绘制“靶心”

问题描述

1 个解决方案

解决方案1 0 2017-07-10 19:50:06

解决方案1
0 2017-07-10 19:50:06