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>