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实现的大小渐变、渐远效果
Apr 15 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 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中变量及部分适用方法
2008/03/27 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
初始Nodejs
2014/11/08 NodeJs
深入探密Javascript数组方法
2015/01/08 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
基于vue.js实现的分页
2018/03/13 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
python中学习K-Means和图片压缩
2017/11/20 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
汽车销售顾问求职自荐信
2014/01/01 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
小学老师寄语大全
2014/04/04 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
目标责任书格式范文
2015/05/11 职场文书
Java存储没有重复元素的数组
2022/04/29 Java/Android