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教程(5):网页背景图片
Apr 02 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
详解盒子端CSS动画性能提升
May 24 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
PHP正确配置mysql(apache环境)
2011/08/28 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
深入理解PHP内核(一)
2015/11/10 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
php表单处理操作
2017/11/16 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
bootstrap中的 form表单属性role="form"的作用详解
2017/01/20 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python使用wxPython实现计算器
2018/01/30 Python
python 编码规范整理
2018/05/05 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Python中six模块基础用法
2019/12/08 Python
浅析python实现动态规划背包问题
2020/12/31 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
护士节策划方案
2014/05/19 职场文书
签字仪式主持词
2015/07/03 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis