开发者社区> 问答> 正文

关于canvas画布中的moveTo()\lineTo()函数

canvas中的moveTo(x,y)lineTo(x,y);一直不清楚这两个函数的坐标和方向是怎么表示的,比如下面这个例子:

function mycanvas()
        {
                var c=document.getElementById("mycanvas");
                var ctxt=c.getContext("2d");
                ctxt.beginPath();
                ctxt.moveTo(10,50);
                ctxt.lineTo(100,50);
                ctxt.lineTo(100,150);
                ctxt.lineTo(10,50);
                ctxt.stroke();
        }
        window.onload=mycanvas;

求指导啊,谢谢~~~~

展开
收起
杨冬芳 2016-06-16 14:44:31 2988 0
1 条回答
写回答
取消 提交回答
  • IT从业

    默认情况下,不做canvas 的坐标变换,左上角是(0,0)然后水平向右是 x轴正方向,向下是y轴正方向。所以说默认右下角的坐标是(width,height) 其中 width和height是你在写canvas标签的时候的width和height属性,这两个属性和css中的width和 height也是不一样的。
    CSS中的这两个属性定义的是显示的大小,而canvas标签中的这两个属性定义的就是右下角的坐标值。当然如果不定义CSS中的width和height默认的canavs大小就是这个两个参数定义的,单位像素。

    2019-07-17 19:40:52
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载