canvas绘制线条时如何设置起点坐标

canvas是html5尺度顶用于绘制图形的标签，当然也浏览器为了撑持这个标签，也供给了良多的js方式供利用，本文就为你介绍canvas若何绘制线条，若何设置起点坐标

东西/原料

1
打开vscode，新建一个html文件，在文件中输入一个感慨号，再按一下tab键，就能快速完当作html5规范的文档布局（利用文本文件编纂也是一样的结果）
2
在body规模内添加一个canvas标签，设置宽高与边框。在浏览器中运行可以看到，canvas标签中心的文字并没有显示在浏览器中，这个文字是当浏览器不撑持canvas的时辰显示的
3
在页面中添加js代码，获取页面canvas标签对象，再判定当浏览器撑持canvas标签时，获取canvas绘制2d，即平面图形的对象
4
在js中继续添加绘图代码，从canvas左上角（0，0）坐标起头，到（150，150）坐标之间的直线。
注重：moveTo(0, 0)的意思就是设置画线的起点坐标
5
在浏览器中运行页面，就可以看到canvas规模内呈现了一条从左上角起头的直线
6
点窜moveTo(0, 0)，酿成从左上角起头(50, 50)的位置为起点坐标，其他代码都不点窜
7
再次打开浏览器，运行可以看到canvas图形中的起点，距离左上角有横标的目的50，纵标的目的50的偏移了