JavaScript를 호출하여 각 테이블 행에 대한 캔버스를 그리는 방법은 무엇입니까?

나는이 같은 ASP.NET 면도기보기가 있습니다JavaScript를 호출하여 각 테이블 행에 대한 캔버스를 그리는 방법은 무엇입니까?

@{ 
    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 함수를 호출하려면 어떻게해야합니까?

출처

2012-02-25 Olav

VAR 할 수 있습니다

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 }

당신이있어 완성 된 웹 페이지를 볼 수 있습니다 특정 테이블 요소 아래에 위치하는 = document.createElement ("canvas"); https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes –

글쎄, 하나의 캔버스를 만들고 그 안에 그림을 그릴 수 있습니다. 그러나 각 테이블 행마다 각각 다른 매개 변수를 사용하여이 작업을 수행하려면 어떻게해야합니까? – Olav

당신은 화살표 물건에 대한 객체를 만들고 싶습니다. 이것은 오른발에 당신을 데려다 줄 것입니다.

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(); 
};

출처

2012-02-25 17:39:10

위의 코드는 전체 페이지에 대해 하나의 Canvas를 만드는 것으로 보입니다. 테이블의 각 행에있는 셀에 대해이 작업을 수행하려면 어떻게해야합니까? – Olav

캔버스 객체를 만들고 원하는 컨테이너에 놓습니다. 유일한 요구 사항은 컨테이너에 ID가 있어야한다는 것입니다. –

나는 마지막으로 잘 작동하는 코드를 작성했다.

이것은 내가 그것을 어떻게 있습니다 :

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 내용이 모든 캔버스 요소로 내용을 그릴로드 된 후 자바 스크립트 함수가 호출 : 그들은 캔버스 요소 내부의 날씨 화살표를 그릴 것입니다 내 자바 스크립트 함수에 값을 전달하는 데 사용됩니다

http://olavtlocation.cloudapp.net/weather

출처

2012-02-28 17:34:56 Olav

JavaScript를 호출하여 각 테이블 행에 대한 캔버스를 그리는 방법은 무엇입니까?

답변

관련 문제