Question

我是HTML5编程的新手。到目前为止，我在大学项目中做到了这一点：http://imgur.com/iFlCplg

基本上，我已经绘制了4个圆圈来形成一个图像，现在我必须对这个大图像进行编码，以便使用滑块每行生成10个小图像，如下所示：http://imgur.com/WRo3y22

按下按钮时，滑块只需要工作。

我的代码：

<svg id="vect"  width="500" height="500"><svg/>

function circletop(x,y,r,esp,cor){
     vect.innerHTML+=
            '<circle cx="'+x+'" cy="'+y+'" r="'+r+'" stroke-width="'+esp+'" stroke="'+cor+'" fill="#013D55" />';
     }
     function circlebot(x,y,r,esp,cor){
     vect.innerHTML+=
            '<circle cx="'+x+'" cy="'+y+'" r="'+r+'" stroke-width="'+esp+'" stroke="'+cor+'" fill="#013D55" />';
     }

     function circleRight(x,y,r,esp,cor){
    vect.innerHTML+=
            '<circle cx="'+x+'" cy="'+y+'" r="'+r+'" stroke-width="'+esp+'" stroke="'+cor+'" fill="#AA8D49" />';
     }
     function circleLeft(x,y,r,esp,cor){
     vect.innerHTML+=
            '<circle cx="'+x+'" cy="'+y+'" r="'+r+'" stroke-width="'+esp+'" stroke="'+cor+'" fill="#AA8D49" />';
     }

我将它全部合并到一个功能上：

function svgBigPicture(){
    circlebop(250,500,225,50,"#449779");
    circleright(0,250,225,50,"#E6B569");
    circleleft(500,250,225,50,"#E6B569");
    circletop(250,0,225,50,"#449779");

如何使用它在每行制作多个圈子？我不能使用jQuery，必须是100％的JavaScript。

Answer 1

这似乎更像一个模式，我认为接近这个的方式很奇怪 - SVG很好，是的，但使用innerHTML写作似乎有点..就像作弊一样。我知道以下解决方案不使用SVG，但考虑使用canvas来寻找可能的解决方案：

var CANVAS = document.getElementById('canvas');
var CTX = CANVAS.getContext('2d');

function draw(x, y, radius){
  CANVAS.width = x * radius * 2;
  CANVAS.height = y * radius;
  // Because canvas draws on top, we want to start at the bottom!
  for(var Y = y; Y >= -1; Y--)
  for(var X = x; X >= -1; X--){
    CTX.beginPath();
    CTX.arc(X * radius * 2 + (Y%2?radius:0), Y * radius, radius, 0, Math.PI * 2);
    CTX.strokeStyle = Y%2 ? 'red' : 'blue';
    CTX.fillStyle = '#fff';
    CTX.stroke();
    CTX.fill();
    CTX.closePath();
  }
}

draw(5,5,50)

var INPUT = document.getElementById('input');
INPUT.addEventListener('change', function(){
  draw(parseInt(this.value, 10), parseInt(this.value, 10) + 1, 50)
});

input {
  position: fixed;
  top: 20px;
  left: 20px;
}

<canvas id="canvas"></canvas>
<input id="input" type="range" min="1" max="10" step="1" />

使用带有JS的SVG并不是最好的匹配...... JS难以阅读SVG标签的内容，而且您自己也会遇到更多问题。如果您真的想沿着这条路走下去，建议您查看SVG的defs和pattern定义，还有一些文档：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

SVG - 使用滑块

1 个答案: