canvas二:绘制圆和其他曲线
1.绘制圆
绘制圆是canvas里面不可缺少的功课,而且绘制圆在canvas中的用处很多,好嘞,开扯
绘制圆需要用到arc这个方法:
arc(X坐标,Y坐标,半径,起始弧度,结束弧度,旋转方向);
弧度与角度的关系:弧度 = 角度*Math.PI/180;
旋转方向:true(逆时针),false(顺时针),默认为顺时针;
实例:我想画一个半圆,先里一下思路,首先我们需要一个区域,也就是绘制路径,即beginPath,
然后我们再需要定义一个开始的绘制点,即moveTo,之后在进行绘圆操作,那么arc里面的参数我们改怎样设置呢,其中,X,Y和绘制起始点的坐标是一样的,半径最好不要太大,以免超过画布,就给个100吧,起始弧度可以为0,然后这个时候的结束弧度为180度,即180*Math.PI/180。你以为这样就结束了吗,图森图样破,我们还需要闭合啊,善始善终哈,来个闭合oGC.closePath();最后进行描线操作就OK了,oGC.stroke();
- var oC = document.getElementById("c1");
- var oGC = oC.getContext("2d");
- oGC.beginPath();
- oGC.moveTo(200,200);
- oGC.arc(200,200,100,0,180*Math.PI/180,false);
- oGC.closePath();
- oGC.stroke();
效果如图:
2.绘制其他曲线
- 曲线:arcTo(x1,y1,x2,y2,r):第一组数据坐标,第二组数据坐标,半径
贝塞尔曲线1:quadraticCurveTo(dx,dy,x1,x2):第一组控制点,第二组结束坐标;
贝塞尔曲线1:bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1):第一组控制点,第二组控制点,第三组结束坐标
- oGC.save();
- oGC.strokeStyle = "red";
- oGC.beginPath();
- oGC.moveTo(100,200);
- oGC.arcTo(100,150,200,100,50);
- oGC.stroke();
- oGC.restore();
效果如下图:
哈哈,是不是以为这样就结束了,还没有,我们在了解了绘制圆以后,就可以实现其他的许多功能了,比如绘制一个时钟(实时更新),和圆拱形的路径。这个随笔有点儿杂了,我决定另起一篇做它们,哼。
canvas二:绘制圆和其他曲线的更多相关文章
- 【Canvas】绘制几何级数Geometric series曲线 y=1+1/2+1/4+1/8+1/16+1/32+1/64+....
相关资料:https://baike.baidu.com/item/%E5%87%A0%E4%BD%95%E7%BA%A7%E6%95%B0/112584?fr=aladdin 图线: 代码: < ...
- Flutter 35: 图解自定义 View 之 Canvas (二)
小菜前几天整理了以下 Canvas 的部分方法,今天小菜继续学习 Canvas 第二部分. drawXXX drawShadow 绘制阴影 drawShadow 用于绘制阴影,第一个参数时绘制一个图形 ...
- HTML5 canvas标签绘制正三角形 鼠标按下点为中间点,鼠标抬起点为其中一个顶点
用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...
- canvas学习(二):渐变与曲线的绘制
canvas学习(二):渐变与曲线的绘制 一:createLinearGradient()线性渐变: 二:createLinearGradient() 放射状/圆形渐变: 三:createPatter ...
- 基于canvas二次贝塞尔曲线绘制鲜花
canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...
- canvas基础[二]教你编写贝塞尔曲线工具
贝塞尔曲线 bezierCurveTo 在线工具 https://canvature.appspot.com/ [感觉这个好用一些] https://blogs.sitepointstatic.com ...
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
- Canvas中绘制贝塞尔曲线
① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...
- 带着canvas去流浪系列之二 绘制折线图
[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
随机推荐
- Python内置字典;dict ,set
dict and set dict: 键-值 /重复添加 set : 键 / key不能重复 对于不变对象来说,调用对象自身的任意方法,也不会改变该对象自身的内容.相反,这些方法会创建新的对象并返 ...
- 找你妹+ipad+wifi,回顾那年的经典游戏
昨天,不是从前天同事拿平板给我后,就没睡过一个安稳觉. 先是看电视看得爽歪了,再就是昨天晚上的游戏之夜.IPAD比較老.连系统都不好更新了.就用了留存的应用. 打开酷我看看有什么音乐推荐,听到一首&l ...
- win7 64位安装oracle10g客户端心得
用了整整两天时间才在64位Win7下装好了Oracle的开发环境(包括Oracle的客户端和第三方客户端工具),过程原来和32位类似,注意不能下载64位的安装包. 安装过程: 1.下载Oracle 1 ...
- linux网口驱动实现(待续)
驱动位于linux/driver/net下. 1. 寄存器读写 asm/io.h #define __raw_writeb(v,a) (__chk_io_ptr(a), *(volatile un ...
- Jquery解析json数组字符串
最近在工作中用到了Jquery来解析json字符串,网上解析jquery解析json单个对象的实例不少,但是jquery解析json数组的实例却是不多,下面我举一个简单的例子来跟大家分享与一下,本人水 ...
- 网络配置br0 brtcl
1.brctl addbr br0 如果根据第3步,那这里不用写 2.brctl addif br0 eth0 如果第3步写了,这里也不用 这时候用ssh应该会断网... 3.设置 ...
- EasyUI的treegrid组件动态加载数据问题的解决办法
http://www.jquerycn.cn/a_3455 —————————————————————————————————————————————————————————————————————— ...
- input输入框用el对数字格式化
<input name="doubleInput" type="text" maxlength="32" id="doubl ...
- 数据库 Mysql内容补充二
多表查询 mysql支持的是SQL99标准的连接查询,并不支持oracle公司的外连接查询, 但是支持oracle等值查询,不等值查询,自连接查询,子查询(只要不是外连接(+)都支持) oracle也 ...
- QSignalMapper Class
/************************************************************************************** * QT QSignal ...