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 相关文章推荐
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 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错误日志 display_errors与log_errors的区别
2012/10/09 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
javascript加号"+"的二义性说明
2013/03/04 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
python 域名分析工具实现代码
2009/07/15 Python
python实现redis三种cas事务操作
2017/12/19 Python
简单了解python模块概念
2018/01/11 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
如何开启linux的ssh服务
2015/02/14 面试题
校运会口号
2014/06/18 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
python blinker 信号库
2022/05/04 Python