在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代碼中的其他兩個元素時，它可以正常工作，所以我錯過了什么，做錯了什么或發生了哪些沖突，導致每個canvas元素都無法在其對應的位置進行渲染頁？

Answer 1

您的init函數職責過多（查找，驗證和繪制）* 3。 當這些職責中的任何一項遇到失敗（即找不到元素）時，顯示就會停止。 在您的情況下w1, w2, w3只會在各自的頁面中定義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;