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();

  1. var oC = document.getElementById("c1");
  2. var oGC = oC.getContext("2d");
  3. oGC.beginPath();
  4. oGC.moveTo(200,200);
  5. oGC.arc(200,200,100,0,180*Math.PI/180,false);
  6. oGC.closePath();
  7. oGC.stroke();

  效果如图:

2.绘制其他曲线

  1. 曲线:arcTo(x1,y1,x2,y2,r):第一组数据坐标,第二组数据坐标,半径
    贝塞尔曲线1quadraticCurveTo(dx,dy,x1,x2):第一组控制点,第二组结束坐标;
    贝塞尔曲线1bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1):第一组控制点,第二组控制点,第三组结束坐标
  1. oGC.save();
  2. oGC.strokeStyle = "red";
  3. oGC.beginPath();
  4. oGC.moveTo(100,200);
  5. oGC.arcTo(100,150,200,100,50);
  6. oGC.stroke();
  7. oGC.restore();

  效果如下图:

哈哈,是不是以为这样就结束了,还没有,我们在了解了绘制圆以后,就可以实现其他的许多功能了,比如绘制一个时钟(实时更新),和圆拱形的路径。这个随笔有点儿杂了,我决定另起一篇做它们,哼。

canvas二:绘制圆和其他曲线的更多相关文章

  1. 【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 图线: 代码: < ...

  2. Flutter 35: 图解自定义 View 之 Canvas (二)

    小菜前几天整理了以下 Canvas 的部分方法,今天小菜继续学习 Canvas 第二部分. drawXXX drawShadow 绘制阴影 drawShadow 用于绘制阴影,第一个参数时绘制一个图形 ...

  3. HTML5 canvas标签绘制正三角形 鼠标按下点为中间点,鼠标抬起点为其中一个顶点

    用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...

  4. canvas学习(二):渐变与曲线的绘制

    canvas学习(二):渐变与曲线的绘制 一:createLinearGradient()线性渐变: 二:createLinearGradient() 放射状/圆形渐变: 三:createPatter ...

  5. 基于canvas二次贝塞尔曲线绘制鲜花

    canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...

  6. canvas基础[二]教你编写贝塞尔曲线工具

    贝塞尔曲线 bezierCurveTo 在线工具 https://canvature.appspot.com/ [感觉这个好用一些] https://blogs.sitepointstatic.com ...

  7. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  8. Canvas中绘制贝塞尔曲线

    ① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...

  9. 带着canvas去流浪系列之二 绘制折线图

    [摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

随机推荐

  1. Python内置字典;dict ,set

    dict and set dict:  键-值 /重复添加 set :  键 / key不能重复 对于不变对象来说,调用对象自身的任意方法,也不会改变该对象自身的内容.相反,这些方法会创建新的对象并返 ...

  2. 找你妹+ipad+wifi,回顾那年的经典游戏

    昨天,不是从前天同事拿平板给我后,就没睡过一个安稳觉. 先是看电视看得爽歪了,再就是昨天晚上的游戏之夜.IPAD比較老.连系统都不好更新了.就用了留存的应用. 打开酷我看看有什么音乐推荐,听到一首&l ...

  3. win7 64位安装oracle10g客户端心得

    用了整整两天时间才在64位Win7下装好了Oracle的开发环境(包括Oracle的客户端和第三方客户端工具),过程原来和32位类似,注意不能下载64位的安装包. 安装过程: 1.下载Oracle 1 ...

  4. linux网口驱动实现(待续)

    驱动位于linux/driver/net下. 1. 寄存器读写 asm/io.h #define __raw_writeb(v,a)   (__chk_io_ptr(a), *(volatile un ...

  5. Jquery解析json数组字符串

    最近在工作中用到了Jquery来解析json字符串,网上解析jquery解析json单个对象的实例不少,但是jquery解析json数组的实例却是不多,下面我举一个简单的例子来跟大家分享与一下,本人水 ...

  6. 网络配置br0 brtcl

    1.brctl addbr br0        如果根据第3步,那这里不用写 2.brctl addif br0 eth0    如果第3步写了,这里也不用 这时候用ssh应该会断网... 3.设置 ...

  7. EasyUI的treegrid组件动态加载数据问题的解决办法

    http://www.jquerycn.cn/a_3455 —————————————————————————————————————————————————————————————————————— ...

  8. input输入框用el对数字格式化

    <input name="doubleInput" type="text" maxlength="32" id="doubl ...

  9. 数据库 Mysql内容补充二

    多表查询 mysql支持的是SQL99标准的连接查询,并不支持oracle公司的外连接查询, 但是支持oracle等值查询,不等值查询,自连接查询,子查询(只要不是外连接(+)都支持) oracle也 ...

  10. QSignalMapper Class

    /************************************************************************************** * QT QSignal ...