HTML5 画布挑战

Question

我正在创建一个 HTML5 应用程序，它将显示一堆不同颜色的形状。我无法显示多个任何形状。

这是我项目的 JSFiddle 链接：http://jsfiddle.net/tithos/3uyLc/

这是我尝试过的事情之一：

$("#go").click(function() {
  var number = $("#number option:selected").val();
  var shape = $("#shape option:selected").val();
  var size = $("#size option:selected").val();
  var offset = size;
  var i = 0;
  var shift = 0;

  while(i < number){
    switch(shape){
      case '1':
        console.log(shift);
        square((offset+shift), size);
        shift = (shift + size);
        break;
      case '2':
        circle(offset, size);
        break;
      case '3':
        triangle(offset, size);
        break;
    }
    i++;
  }
});

当重复 16 次时，会在 concole 中给我“0121212121212121212121212121212”。它是连接，而不是添加。为什么？

欢迎任何帮助或见解

谢谢，

提姆

Answer 1

由于 .val() 返回一个字符串，因此您在两个字符串之间使用 + 运算符，即连接运算符。使用 parseInt 将字符串转换为整数。

Answer 2

在前几行中，您需要从每个 .val() 函数中解析 Int。所以：

var number = $("#number option:selected").val();
var shape = $("#shape option:selected").val();
var size = $("#size option:selected").val();

变成

var number = parseInt($("#number option:selected").val());
var shape = $("#shape option:selected").val();
var size = parseInt($("#size option:selected").val());

但大小和“偏移”计算都在错误的地方完成。它们需要在主循环中完成，而每个 drawShape 方法的任务是在指定大小的给定位置绘制给定形状。 http://jsfiddle.net/3uyLc/39/

这里是固定代码：

jQuery.noConflict();
(function($) {
    $("#clear").click(function() {
        console.log("clear!");
        var c=document.getElementById("canvas");
        var context=c.getContext("2d");
        context.clearRect(0, 0, canvas.width, canvas.height);
    });

    function square(offset, size){
        var color = $("#color option:selected").val();
        var c=document.getElementById("canvas");
        var context=c.getContext("2d");

        context.fillStyle = color;
        context.fillRect(offset,0,size,size);
    }

    function circle(offset, size){
        var color = $("#color option:selected").val();
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var radius = size / 2;
        var x = offset + radius;
        var y = radius;

        context.beginPath();
        context.arc(x, y, radius, 0, 2 * Math.PI, false);
        context.lineWidth = 1;
        context.fillStyle = color;
        context.fill();

        //context.fillStyle="#ff0000";
        //context.fillRect(x-1, y-1, 2, 2);
    }

    function triangle(offset, size){
        console.log(offset);
        var color = $("#color option:selected").val();
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var width = size;
        var height = size;

        // Draw a path
        context.beginPath();
        //top of triangle
        context.moveTo(offset + width/2, 0);
        //top to right
        context.lineTo(offset + width, size);
        //bottom of triangle
        context.lineTo(offset, size);
        context.closePath();

        // Fill the path
        context.fillStyle = color;
        context.fill();
    }

    $("#go").click(function() {
        var number = parseInt($("#number option:selected").val());
        var shape = $("#shape option:selected").val();
        var size = parseInt($("#size option:selected").val()) * 10;
        var i = 0;
        var position = 0;
        var padding = size * 0.5; //leave space between the shapes 1/2 as large as the shape itself

        while(i < number){
            switch(shape){
                case '1':
                    square(position, size);
                    break;
                case '2':
                    circle(position, size);
                    break;
                case '3':
                    triangle(position, size);
                    break;
            }
            i++;
            // calculate the position of the next shape
            position = position + size + padding;
        }
    });
})(jQuery);​