テーブル行ごとにキャンバスに描画するJavaScriptを呼び出す方法は？

Question

は、私はこのようなASP.NETレイザービューを持っている：

@{ 
    this.Layout = null; 
} 
<script type="text/javascript"> 

    function drawWindArrow(canvas, windDirection) { 
     // Draw something 
} 

</script> 

<table style="width: 100%"> 
    @foreach (var weather in ViewBag.WeatherForecastList) 
    { 
     double windDirection = weather.WindDirection; 
     <tr> 
      <td> 
       <canvas width="32" height="32"></canvas> 
       How can I call drawWindArrow with the canvas and the windDirection as a parameter??? 
      </td> 
     </tr> 
    } 
</table> 

私は、テーブルの行ごとに異なっているキャンバスに何かを描きたいと思います。ここにある矢と似ているはずです：http://www.yr.no/sted/Norge/Oslo/Oslo/Oslo/しかし、CSS3のスタイルに基づいて色を変えて描画する必要があるので、私は静的な画像を使いたくありません。

キャンバスとwindDirectionをパラメータとしてdrawWindArrow JavaScript関数を呼び出すにはどうすればよいですか？

Answer 1

あなたの矢印のもののオブジェクトを作成する必要があります。これは右足にあなたを取得する必要があります。

var TableCanvasObject = function (arrowDirection, arrowType, container, id) { 
    this.container = container; 
    this.canvas = null; 
    this.ctx = null; 
    this.createArrow = function() { 
     if (arrowType == "foo") { 
      //draw arrow foo 
     } else if (arrowType = "boo") { 
      //draw arrow boo 
     } 
    }; 
    this.create = function() { 
     this.canvas = document.createElement("canvas"); 
     this.canvas.id = id; 
     this.ctx = this.canvas.getContext("2d"); 
     this.createArrow(); 
    }; 
    this.create(); 
    this.display = function() { 
     container.append(this.canvas); 
    } 
}; 


window.onload = function() { 
    var obj = new TableCanvasObject(90, "foo", document.getElementById("con"), "my thing"); 
    obj.display(); 
}; 

Answer 2

私は最終的にうまく動作するコードを書いています。

これは私がそれをやった方法です：

1）私のASP.NETカミソリビューの要素内の私のキャンバスを定義します。 Canvas要素のHTML5データ属性の使用に注目してください。

<td> 
    @string.Format("{0:f1}m/s ", weather.WindSpeed) 
    <canvas width="32" height="32" data-windSpeed="@(weather.WindSpeed)" data-windDirection="@(weather.WindDirection)"> 
    </canvas> 
    <br /> 
    @weather.WindSpeedName 
</td> 

2）HTMLコンテンツは、すべてのcanvas要素にコンテンツを描画するためにロードされた後、JavaScript関数が呼び出されます。彼らは、canvas要素内の気象矢印を描画します私のJavaScript関数に値を渡すために使用されています特定のテーブル要素の下に配置されている：

function drawWindArrows() { 
    $('#weather canvas').each(function() { 
     var parent = this.parentNode; 
     var style = window.getComputedStyle(parent, null); 
     var color = style.color; 
     var windSpeed = $(this).attr('data-windSpeed'); 
     var windDirection = $(this).attr('data-windDirection'); 
     drawWindArrow(this, color, windSpeed, windDirection); 
    }); 

} 

function drawWindArrow(canvas, color, windSpeed, windDirection) { 
    // Draw inside the canvas 
} 

あなたはここに完成したウェブページを見ることができます：

http://olavtlocation.cloudapp.net/weather