html5學習筆記——canvas（二）

剛學習canvas的時候，使用canvas繪製直線。
定義一個canvas：

<canvas id="canvas" class="canvas"></canvas>

樣式：

<style>
    .canvas
    {
        width:400px;
        height:400px;
        background-color:#d0cece ;
    }
</style>

通過jquery調用繪製直線：

            var ctx = $("#canvas").get(0).getContext("2d");

            ctx.beginPath();

            ctx.moveTo(100, 50);
            ctx.lineTo(100, 200);

            ctx.stroke();

            ctx.closePath();

這樣做你會發現，canvas能夠繪製出直線，但是直線的座標始終不正確，即使使用style直接修改也不行。

解決辦法，直接設置canvas的寬度和高度：

<canvas id="canvas" width="400px" height="400px;" ></canvas>