首页 > web前端 > html/css/css3 > html5 canvas绘图之context.moveTo,context.lineTo,绘制直线实例
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
06-15

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绘图标签 详细使用教程 - 第7张  | 码农小兵

进入html5 canvas绘图详细教程

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*