【canvas绘制线条时如何设置起点坐标】canvas是html5尺度顶用于绘制图形的标签 ， 当然也浏览器为了撑持这个标签 ， 也供给了良多的js方式供利用 ， 本文就为你介绍canvas若何绘制线条 ， 若何设置起点坐标
需要这些哦
vscode
方式/
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的偏移了
文章插图
以上内容就是canvas绘制线条时如何设置起点坐标的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 餐桌平面图制作
- 紫砂壶所有线条详解
- 地图是按什么进行绘制的（地图介绍）
- 测序|单细胞测序绘制人胚胎脊髓发育“时间表”
- 巧舌如簧造句（巧舌如簧怎样造句）
- wps里面如何做思维导图（WPS中绘制思维导图方法）
- 绘制梧桐树叶的方法（梧桐树叶怎么画）
- 旋臂结构|中外学者绘制迄今最精确银河系旋臂结构图
- 素描如何正确入门（怎么快速学会入门素描）
- 草果|历时15个月云南怒江草果全基因组精细图谱绘制成功