夜鹰教程网-程序员的加油站
 当前位置:文章中心 >> web前端技术
canvas绘制路径
夜鹰教程网 来源:www.yyjcw.com 日期:2017-10-28 18:14:44
canvas绘制路径

1、绘制路径的方法

 

beginPath():开始一个新路径。

 

closePath():关闭路径。

 

stroke():绘制路径边框。

 

fill():使用颜色填充路径绘制的图形。

 

moveTo(x,y):设置坐标的位置。

 

lineTo(x,y):绘制一条直线。参数(x,y)是终点的坐标,起点坐标取决于前一路径(即:前一路径的终点就是当前路径的起点。可以通过moveTo()设置起始坐标。)

 

2、绘制路径的步骤

 

第一步:调用beginPath()创建路径。在内存里,路径是以一组子路径(直线、弧线等)进行存储,共同构成一个图形。每次调用beginPath(),子路径都会被重置,这样就可以绘制新的图形。

 

第二步:实际绘制路径。

 

第三步:调用closePath()关闭路径。尝试在当前端点通过直线连接起始端点来关闭图形。如果图形已经关闭   或者只有一个点,则不会执行任何操作。这一步是可选的。

 

第四步:调用stroke()或者fill(),此时,图形才实际的绘制到canvas上。

 

注:使用fill()时,图形会自动闭合,不需要调用closePath().


复制链接 网友评论 收藏本文 关闭此页
上一条: 什么是单页应用  下一条: canvas绘制衣架
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  热点推荐
XML Schema学习笔记(1)
XML Schema学习笔记(2)
C#对XML文档的操作
ASP操作XMLDOM
XML入门教程:分析XML
百度新闻开放协议XML文档制作方法…
XSL 语言
用RSS做五分钟一自动更新的网站
XML入门教程:文档类型声明
XML教程:通过一个例子来学习XML的…
XML节点相关知识
把XML文件绑定到列表控件
XML+XSLT+CSS+JQuery+WebService组…
XHTML头部Doctype声明必不可少!
历数Firefox2.0对XML处理的改进
  最近更新
金三银四跳槽季—前端面试汇总
Sublime常用插件汇总(全)
大前端学习路线
如何克服前端学习进步慢的问题
web前端常见基础问题
阿里前端面试经历(转载)
Web前端需要掌握技术汇总(转)
ESLint详解-让你的代码更加规范
通过userAgent适配 PC端和移动端网…
js操作DOM中需要注意的问题
Promise编程简介
Emmet语法和实例
新手所必须掌握的前端知识汇总
移动端视口的相关概念及其适配方案…
上传图片立即预览

关于我们 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3