Динамически сгенерированные элементы холста в ASP.NET

Question

У меня есть несколько элементов холста, которые динамически отображаются на моей странице на основе кода VB.

Это то, что моя страница ASPX выглядит следующим образом:

<canvas id="canvasnhlrc" width="225" height="200" runat="server"></canvas> 
<canvas id="canvascwl" width="225" height="200" runat="server"></canvas> 
<canvas id="canvashslanguages" width="225" height="200" runat="server"></canvas> 

Это то, что мой aspx.vb код выглядит следующим образом:

canvasnhlrc.Visible = False 
canvascwl.Visible = False 
canvashslanguages.Visible = False 

     If RouteData.Values("mediasubType") IsNot Nothing Then 

      Dim qsubMedia As String = RouteData.Values("mediasubType") 

      Select Case qsubMedia 

       Case "nhlrc" 

        canvasnhlrc.Visible = True 

       Case "cwl" 

        canvascwl.Visible = True 

       Case "hslanguages" 

        canvashslanguages.Visible = True 

      End Select 

     End If 

Так что, если моя страница example.com/nhlrc, то холст генерируется как

<canvas id="ContentPlaceHolder2_canvasnhlrc" width="225" height="200"></canvas> 

Соответственно, я отформатировал свой файл js следующим образом:

function init() 
{ 
    var w1 = document.getElementById('ContentPlaceHolder2_canvasnhlrc') 
    var w1x = w1.getContext('2d'); 
    w1x.shadowOffsetX = 0; 
    w1x.shadowOffsetY = 0; 
    w1x.shadowBlur = 20; 
    w1x.shadowColor = "rgba(0, 0, 0, 0.75)"; 
    w1x.fillStyle = 'rgb(218, 233, 246)'; 
    w1x.beginPath(); 
    w1x.moveTo(25, 25); 
    w1x.lineTo(175, 25); 
    w1x.lineTo(175, 50); 
    w1x.lineTo(200, 75); 
    w1x.lineTo(175, 100); 
    w1x.lineTo(175, 175); 
    w1x.lineTo(25, 175); 
    w1x.closePath(); 
    w1x.fill(); 

    var w2 = document.getElementById('ContentPlaceHolder2_canvascwl') 
    var w2x = w2.getContext('2d'); 
    w2x.shadowOffsetX = 0; 
    w2x.shadowOffsetY = 0; 
    w2x.shadowBlur = 20; 
    w2x.shadowColor = "rgba(0, 0, 0, 0.75)"; 
    w2x.fillStyle = 'rgb(12, 64, 114)'; 
    w2x.beginPath(); 
    w2x.moveTo(25, 25); 
    w2x.lineTo(175, 25); 
    w2x.lineTo(175, 50); 
    w2x.lineTo(200, 75); 
    w2x.lineTo(175, 100); 
    w2x.lineTo(175, 175); 
    w2x.lineTo(25, 175); 
    w2x.closePath(); 
    w2x.fill(); 

    var w3 = document.getElementById('ContentPlaceHolder2_canvashslanguages') 
    var w3x = w3.getContext('2d'); 
    w3x.shadowOffsetX = 0; 
    w3x.shadowOffsetY = 0; 
    w3x.shadowBlur = 20; 
    w3x.shadowColor = "rgba(0, 0, 0, 0.75)"; 
    w3x.fillStyle = 'rgb(12, 64, 114)'; 
    w3x.beginPath(); 
    w3x.moveTo(25, 25); 
    w3x.lineTo(175, 25); 
    w3x.lineTo(175, 50); 
    w3x.lineTo(200, 75); 
    w3x.lineTo(175, 100); 
    w3x.lineTo(175, 175); 
    w3x.lineTo(25, 175); 
    w3x.closePath(); 
    w3x.fill(); 
} 
onload = init; 

К сожалению, я могу только получить первый холст элемент (NHLRC) появляться в то время как последующие полотна (example.com/cwl и т.д.) не оказывают. В коде нет ничего плохого, потому что, когда я комментирую другие два элемента в JS-коде, он отлично работает, поэтому что мне не хватает, что-то не так, или что противоречит, что не позволяет каждому из элементов холста отображать в соответствующем страница?

Answer 1

У вашей функции инициализации слишком много обязанностей (находят, проверяют и рисуют) * 3. Когда какая-либо из этих обязанностей встречается с отказом, то есть не может найти элемент, шоу останавливается. В вашем случае w1, w2, w3 будет определяться только на соответствующих страницах, а не на каждой странице.

Вы можете упростить его, как показано ниже:

function draw(theCanvasEl, theFill) 
{ 
    var w1x = theCanvasEl.getContext('2d'); 
    w1x.shadowOffsetX = 0; 
    w1x.shadowOffsetY = 0; 
    w1x.shadowBlur = 20; 
    w1x.shadowColor = "rgba(0, 0, 0, 0.75)"; 
    w1x.fillStyle = theFill; 
    w1x.beginPath(); 
    w1x.moveTo(25, 25); 
    w1x.lineTo(175, 25); 
    w1x.lineTo(175, 50); 
    w1x.lineTo(200, 75); 
    w1x.lineTo(175, 100); 
    w1x.lineTo(175, 175); 
    w1x.lineTo(25, 175); 
    w1x.closePath(); 
    w1x.fill(); 
} 

function init() 
{ 
    var canvases = [['ContentPlaceHolder2_canvasnhlrc', 'rgb(218, 233, 246)'], 
    ['ContentPlaceHolder2_canvascwl', 'rgb(12, 64, 114)'], 
    ['ContentPlaceHolder2_canvashslanguages', 'rgb(12, 64, 114)']]; 

    for(var i=0;i<canvases.length;i++) 
    { 
     var theCanvas = document.getElementById(canvases[i][0]); 
     if (theCanvas!=null) { 
     draw(theCanvas, canvases[i][1]); 
     break;    
     } 
    } 
} 

onload = init;