html5 canvas绘图之context.moveTo,context.lineTo,绘制直线实例

绘制直线 context.moveTo(x,y)  context.lineTo(x,y)

x,y 绘制坐标

context.moveTo(x,y) 绘制起点

context.lineTo(x,y)   绘制终点

从moveTo(x,y)  到 lineTo(x,y)绘制直线，如果没有moveTo那么起点就是linkTo， 每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前一次lineTo的结束点。
举例说明

<canvas id="demo-canvas" width="800" height="800">
您的浏览器不支持<canvas>,建议升级。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("demo-canvas");
if (canvas.getContext){
    var context = canvas.getContext("2d"); 
    context.strokeStyle = "rgb(250,0,0)";
    context.fillStyle = "rgb(250,0,0)"
    //实验证明第一次lineTo的时候和moveTo功能一样
    context.lineTo(100, 100);
    //之后的lineTo会以上次lineTo的节点为开始
    context.lineTo(200, 200);
    context.lineTo(200, 100);
    context.moveTo(200, 50);
    context.lineTo(100,50);
    context.stroke();
}
<script>

下面一个例子复杂一点，绘制一个菊花，用到数学函数，数学函数自己参考。

<canvas id="demo-canvas" width="800" height="800">
您的浏览器不支持<canvas>,建议升级。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("demo-canvas");
if (canvas.getContext){
    var context = canvas.getContext("2d"); 
        context.fillStyle = "#EEEEFF";
        context.fillRect(0, 0, 400, 300);
        var n = 0;
        var dx = 150;
        var dy = 150;
        var s = 100;
        context.beginPath();
        context.fillStyle = 'rgb(100,255,100)';
        context.strokeStyle = 'rgb(0,0,100)';
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 15 * 11;
        for (var i = 0; i < 30; i++) {
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.lineTo(dx + x * s, dy + y * s);
        }
        context.closePath();
        context.fill();
        context.stroke();
}
<script>

效果图

进入html5 canvas绘图详细教程