javascript生成的多个HTMl5画布元素未出现(使用单个元素可以正常工作)
我对Javascript比较陌生,我正在尝试在同一页面上生成多个画布元素,用作产品的评级显示。我的javascript画了很多星星 当一个产品搜索结果只返回一个产品画布元素时,这种方法很好,但是当有多个产品时,画布元素甚至不会出现在页面或HTML本身上 以下是我的代码,我使用AJAX搜索,但为了可读性,我去掉了大部分代码,如果有语法错误,请原谅: Search.jsjavascript生成的多个HTMl5画布元素未出现(使用单个元素可以正常工作),javascript,html,canvas,Javascript,Html,Canvas,我对Javascript比较陌生,我正在尝试在同一页面上生成多个画布元素,用作产品的评级显示。我的javascript画了很多星星 当一个产品搜索结果只返回一个产品画布元素时,这种方法很好,但是当有多个产品时,画布元素甚至不会出现在页面或HTML本身上 以下是我的代码,我使用AJAX搜索,但为了可读性,我去掉了大部分代码,如果有语法错误,请原谅: Search.js function doRatings(avgRating, results){ /* Print search *
function doRatings(avgRating, results){
/* Print search */
var canvas = new Array();
resultsHTML = '';
for(i=0;i<results.length;i++){
resultsHTML = resultsHTML + '<div id="AvgRating' + i + '"></div> <p>Under canvas</p>';
}
document.getElementById("content").innerHTML = '<div class="section group">' + resultsHTML + '</div>';
if(avgRating > 0){
canvas[i] = document.createElement('canvas');
canvas[i].width = 240;
canvas[i].height = 20;
canvas[i].id = i;
drawRating(canvas[i], avgRating);
document.getElementById("AvgRating" + i).appendChild(canvas[i]);
}
}
DrawStars.js
function drawRating(canvas, avgRating){
var ctx = canvas.getContext('2d');
//Start star loop
for(var s=0; s<avgRating; s++){
ctx.fillStyle = 'yellow';
ctx.stokeStyle = 'black';
//Work out the angles between each vertex
var a = (2 * Math.PI) / 10; //5 inside and outside angles
var radius = 10; //Determins the size of the stars
//Determine the positioning to draw the start based upon the interation of the loop and the size of the star
var starXY = [((s*(radius * 2 + 4)) + radius), radius];
ctx.beginPath();
//Begin drawing loop for star
for(var i = 11; i != 0; i--){
var r = radius*(i % 2 + 1) / 2;
var o = a * i;
ctx.lineTo((r * Math.sin(o)) + starXY[0], (r * Math.cos(o)) + starXY[1]);
}
ctx.closePath();
ctx.stroke();
ctx.fill();
}}
将循环添加到画布创建完成过程-请参阅
当您附加画布[i]时,它应该是document.getElementByIdAvgRating+i.appendChildcanvas[i];而不是AvgRating+IDAh是的抱歉,这只是一个错误时创建的修剪代码放在这里。ID通常指产品的ID。画布[i]创建不在循环中,因此只创建一个。
function doRatings(avgRating, results){
/* Print search */
var canvas = new Array();
resultsHTML = '';
for(i=0;i<results.length;i++){
resultsHTML = resultsHTML + '<div id="AvgRating' + i + '"></div> <p>Under canvas</p>';
}
document.getElementById("content").innerHTML = '<div class="section group">' + resultsHTML + '</div>';
for(i=0;i<results.length;i++){
if(avgRating > 0){
canvas[i] = document.createElement('canvas');
canvas[i].width = 240;
canvas[i].height = 20;
canvas[i].id = i;
drawRating(canvas[i], avgRating);
document.getElementById("AvgRating" + i).appendChild(canvas[i]);
}
}
}