带你快速玩转canvas(2)画个矩形,再画个圆
来源:互联网 发布:smt贴片机编程难吗 编辑:程序博客网 时间:2024/06/04 18:51
先讲API,再讲如何画,没有耐心的可以直接看3和4,然后在回过头来看API说明
DEMO地址
1. 绘制矩形
fillRect(x, y, width, height)
1. 绘制一个矩形;2. 该矩形为填充满的;3. x和y指矩形左上角,相对于画布的坐标。4. x和y的标准范围是x:0~width, y:0~height5. 参数是number类型,不是字符串类型;6. 示例:ctx.fillRect(10, 20, 50, 50);7. 关于参数的解释,下同;
strokeRect(x, y, width, height)
1. 绘制一个矩形;2. 该矩形只有边框;3. 该矩形内部透明;
clearRect(x, y, width, height)
1. 清除一个矩形区域;2. 该矩形区域内内容被清除,变为透明;
2. 绘制路径
解释:
1. 简单来说,是绘制几条边,然后这几条边围城一个封闭图形,就完成了一个图形;2. 绘制过程中,建议不要去做其他事,原因见流程3-5;3. 开始绘制:ctx.beginPath();4. 绘制中:略,此时只有线条,但是没有图形(轮廓也没有,线条是看不见是,只是为最后一步做准备);5. 结束绘制:ctx.fill()或者ctx.stroke(),前者填充满图形,后者只有线条轮廓;6. 因为是一个封闭的过程,所以虽然也可以在绘制过程中去完成其他的绘图(不是所有都可以),但是这样不利于维护,因此还是建议分开写;
API:
beginPath()
1. 生成一条路径;2. 这条路径是母路径,在绘制过程中,会生成很多条子路径,3. 子路径最终构成的就是我们想要的图形4. 另外,虽然这个方法可以多次调用(至少在我的浏览器可以),但是建议还是按照上面流程来完成,这样至少代码可维护性好,不易发生BUG;
closePath()
1. 闭合路径;2. 简单来说,就是从线条绘制到当前位置时的坐标,和起点连线;3. 起点是指调用beginPath后,移动到的第一个点;4. 这个点可能是moveTo的参数,也可能是lineTo的参数,或者其他。但总之,第一条路径一般视为于moveTo
stroke()
1. 描绘轮廓;2. 通俗的说,就是你线条怎么画的,他给你把线条染色(没染色前是看不见的);3. 这个只染轮廓不填充;
fill()
1. 填充线条;2. 这个填满被线条包围的区域;3. 重点是包围的区域,比如你画个五角星(线条穿来穿去),那么五角星内部的五边形和五个三角形会被填充,外部不会;4. 在调用beginPath()之前,染色视为最后一次的fillStyle的颜色;
moveTo(x, y)
1. 移动画笔;2. 移动过程中不会产生线条;3. 可以把这个理解为把笔抬起来,然后移动到新地方后再把笔放下来;
lineTo(x, y)
1. 画一条直线;2. 起始位置是当前笔的位置;3. 参数是笔移动后的终点位置(相对于画布的坐标);4. 终点位置是下一次画图时,笔的起始位置;
arc(x, y, radius, startAngle, endAngle, anticlockwise)
1. 画一个圆弧;2. x和y是圆心相对于画布的坐标;3. radius是圆的半径;4. startAngle和endAngle是起始角度和终止角度,单位是弧度,2 * Math.PI是360度;5. anticlockwise表示顺逆时针,false为顺时针,true为逆时针;6. 起始坐标是圆的正右方位置
3. 画矩形
0.颜色
使用stroke()(轮廓颜色)或者fill()(填充颜色)完毕后,再更换颜色开始下一次绘图
1.画未填充的矩形
1. 画未填充的矩形还是很简单的;2. 首先确定矩形左上角顶点的位置;3. 再确定矩形的宽高;4. 使用strokeRect(x, y, width, height),将数据输入即可;
2.画填满的矩形
1. 画未填充的矩形还是很简单的;2. 首先确定矩形左上角顶点的位置;3. 再确定矩形的宽高;4. 使用fillRect(x, y, width, height),将数据输入即可;(和上面的区别在这一步)
3.画内有空隙的矩形
1. 典型来说,比如外边有个大矩形,内部有个小矩形,两个矩形之间被染色,而内部小矩形是透明的;2. 先按照2的方式画个矩形;3. 然后使用clearRect(x, y, width, height)清空小矩形区域的图形即可;
4. 画圆形
0.颜色
使用stroke()(轮廓颜色)或者fill()(填充颜色)完毕后,再更换颜色开始下一次绘图
1.画圆形
0. 调用ctx.beginPath()开始画路径;1. 确定圆心坐标和圆半径2. 调用ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)方法3. x和y填圆心坐标,radius填半径;4. startAngle填开始角度,endAngle填结束角度,注意,角度为0时,起始点为圆心正右方;5. 角度为弧度,弧度和角度的换算是360角度 = 2π弧度;6. 最后一个参数不填或者为false时,表示默认顺时针绘图,否则为逆时针绘图;7. 可能会产生一个bug,原因和解决方式见下面画两个圆
2.画两个圆形
1. 大部分和1相同;2. 正常流程是通过beginPath()——》画一个圆——》fill()或者stroke(),重复这个流程画下一个圆;3. 如果不是这样的流程的话,那么需要看第四条4. 需要使用moveTo来将画笔从第一个圆的终止处,移动到第二个圆画图时的起始处(你要画图的圆弧的起始处),然后再开始画下个圆;5. 圆形就调用fill(),圆弧就调用stroke()6. 如果非满圆的话,注意结果不是扇形,是一个圆被一刀切掉一部分后的样子(具体自己画一下就理解了,或者看DEMO);
3.画圆弧
1. 大部分和1相同;2. 需要注意的是笔记的轨迹;3. 在beginPath()后可以直接开始画圆弧,因为自带moveTo效果;4. 画完后直接调用stroke()方法来收尾给线条染色;5. 连续画圆弧的话,建议走beginPath()——》画一个——》stroke(),然后下一轮的方式,比较稳妥;
4.画扇形
1. 大部分和画圆相同;2. 需要先手动移动画笔到圆心,再调用arc方法来画图,不然画出来的就不是一个扇形;3. 参照DEMO里第二个图和第三个图的区别,就是圆和扇形的区别了;
0 0
- 带你快速玩转canvas(2)画个矩形,再画个圆
- 带你快速玩转canvas(3)贴个图片,写点字
- 带你快速玩转canvas(4)实战——写个折线图
- 带你快速玩转canvas(1)上手和染色
- 带你快速玩转canvas(6)导出为base64字符串和画笔的保存
- 带你快速玩转canvas(7)保存画笔状态和恢复画笔状态
- 带你快速玩转canvas(8)非常用API的说明集
- 带你快速玩转canvas(5)画布某时刻某部分画面的存储和恢复
- 带你玩转JavaWeb开发之一-HTML快速入门
- 55个必备技巧带你玩转JavaScript
- 55个必备技巧带你玩转JavaScript
- 带你玩转Github
- 带你玩转二维码
- 带你玩转 UIAlertController
- Canvas(一):画矩形
- 带你玩转Visual Studio 系列 (转载)
- Android 带你玩转实现游戏2048 其实2048只是个普通的控件
- Android 带你玩转实现游戏2048 其实2048只是个普通的控件
- ClassyShark apk分析利器
- Cmake 2.8.11 rc1 + gcc 4.9.2 编译OpenCV 2.4.9
- 带你快速玩转canvas(1)上手和染色
- 关于在学习timer拦截器时遇到的问题--控制台没有输出信息
- VS中的链接重复问题
- 带你快速玩转canvas(2)画个矩形,再画个圆
- <<Linux内核完全剖析 --基于0.12内核>>学习笔记 第4章 80x86保护模式及其编程 4.7 任务管理
- 生产者消费者问题(java实现)
- 关于如何使用MapReducer来寻找共同好友
- uiautomator自动化测试
- 哲学家就餐问题(java实现)
- Android学习分享-常见控件05-RadioButton和CheckBox详解
- Mac安装Nginx、配置PHP(二)
- 智取设计模式之简单工厂模式