canvas学习笔记之绘制简单路径


Posted in HTML / CSS onJanuary 28, 2019

1 线段(直线路径)

绘制线段一般步骤:

moveTo(x,y) 移动画笔到指定的坐标点(x,y)
lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y)
stroke() 根据当前的画线样式,绘制当前或已经存在的路径

2 矩形路径

绘制矩形路径一般步骤:

rect(x, y, width, height) 矩形路径,坐标点(x,y),width height宽高
stroke()或fill 根据当前的样式,绘制或填充路径
也可使用前文提到的strokeRect或fillRect, 或者是通过lineTo拼接成矩形

3 圆弧路径

先看下绘制圆弧的api:

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

x, y 圆弧中心, radius 圆弧半径, startAngle 起始点, endAngle 圆弧终点, anticlockwise 默认为顺时针, true逆时针
CSS中做旋转用到都是角度(deg),但是arc函数中表示角的单位是弧度,不是角度。角度与弧度的js表达式: 弧度 = (Math.PI/180) * 角度(deg)。
这里弧度是以x轴正方向为基准、默认顺时针旋转的角度来计算

图示:

canvas学习笔记之绘制简单路径
 

(图片来自大漠)

ctx.beginPath();
ctx.arc(200, 100, 100, 0, Math.PI / 2, false);
ctx.closePath();
ctx.stroke();
ctx.fill();

canvas学习笔记之绘制简单路径

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
web页面录屏实现
Feb 12 #HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 #HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 #HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 #HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 #HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 #HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 #HTML / CSS
You might like
destoon找回管理员密码的方法
2014/06/21 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
axios基本入门用法教程
2017/03/25 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
python 多线程应用介绍
2012/12/19 Python
vc6编写python扩展的方法分享
2014/01/17 Python
使用python加密自己的密码
2015/08/04 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
一套PHP的笔试题
2013/05/31 面试题
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
银行会计业务的个人自我评价
2013/11/02 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
空气环保标语
2014/06/12 职场文书
维稳工作承诺书
2015/01/20 职场文书
班主任自我评价范文
2015/03/11 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python