没有合适的资源?快使用搜索试试~ 我知道了~
详解html5 canvas常用api总结(二)–绘图API
0 下载量 105 浏览量
2021-01-19
21:35:19
上传
评论
收藏 154KB PDF 举报
温馨提示
试读
6页
canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API。 绘画的时候canvas相当于画布,而context相当于画笔。 1.绘制线条 moveTo(x0,y0):把当前画笔(ictx)移动到(x0,y0)这个位置。 lineTo(x1,y1):从当前位置(x0,y0)处到(x1,y1)画一条直线。 beginPath():开启一条路径或者重置当前路径。 closePath():从当前点回到路径起始点,也就是上一个beginPath的位置,回避和路径。 stroke():绘制。必须加了这个
资源推荐
资源详情
资源评论
详解详解html5 canvas常用常用api总结总结(二二)–绘图绘图API
canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网
页游戏,接下来就总结一下和绘图有关的API。
绘画的时候canvas相当于画布,而context相当于画笔。
1.绘制线条绘制线条
moveTo(x0,y0):把当前画笔(ictx)移动到(x0,y0)这个位置。
lineTo(x1,y1):从当前位置(x0,y0)处到(x1,y1)画一条直线。
beginPath():开启一条路径或者重置当前路径。
closePath():从当前点回到路径起始点,也就是上一个beginPath的位置,回避和路径。
stroke():绘制。必须加了这个函数才会画图,所以这个一定要放在最后。
var icanvas=document.getElementById("iCanvas");
var ictx=icanvas.getContext("2d");
ictx.beginPath();
ictx.moveTo(0,0);
ictx.lineTo(300,150);
ictx.lineTo(3,150);
ictx.closePath();
ictx.stroke();
效果:
这里要注意,如果closepath放在stroke函数后面,则不会绘制成一个闭合的线条,因为在闭合前,已经绘制了,所以左边那条
直线不会画出来。
2.线条样式线条样式
lineCap:线条端点样式,butt,round,square。
lineJoin:两线条相交时的拐点样式,其中设置为miter时还可以通过miterLimet设置拐点交界处的最大长度。
资源评论
不善言辞的我
- 粉丝: 258
- 资源: 922
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 4399GameSem_116_13955_207551_6.apk
- python 3.9.19源码编译包
- php-8.2.18-Win32-vs16-x64.rar
- 字节跳动青训营-抖音项目
- SQL资料手册,语句教程,高级查询语句语法
- 上位机和串口建立 Modbus 协议进行数据传输,并使用 Mysql 数据库存储,能够实现实时温湿度显示和动态变化曲线,历史数据
- Attachment 1_chazhi.xlsx
- 安卓项目,实现虚拟摇杆通过wifi串口发送nema-0183协议实现小吊舱方向控制
- 基于modbus协议的大屏数据监控,使用modbus slave模拟数据,串口服务器获取温湿度
- 下载资源.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功