HTML5 Canvas挑战赛
HTML5 Canvas挑战赛
提问于 2012-04-24 03:53:38
我正在创建一个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中得到“0121212121212121212121212121212121212”。它是连接，而不是相加。为什么？
欢迎提供任何帮助或见解
谢谢,
时间
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-04-24 03:56:37
因为.val()返回一个字符串，所以在两个字符串之间使用+运算符，这是连接运算符。使用parseInt将字符串转换为整数。
Stack Overflow用户
发布于 2012-04-24 05:36:48
在前几行中，您需要从每个.val()函数执行parseInt。所以：
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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10287293
复制相关文章
相似问题
腾讯云开发者
