我正在创建一个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次时,给我带来了“0121212121212121212121212121212”。它是连接,而不是添加。为什么呢?
欢迎任何帮助或见解
谢谢,
蒂姆答案 0 :(得分:3)
因为.val()返回一个字符串,你在两个字符串之间使用+运算符,这是串联运算符。使用parseInt将字符串转换为整数。
答案 1 :(得分:0)
在前几行中,您需要从每个.val()函数中解析。所以:
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);