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二:绘制圆和其他曲线的更多相关文章

  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. timeout的作用

    废话: 刚才刚才看视屏有一点没看懂,timeout的作用. 得出的结果: setTimeout(‘test()’,1000); 第一个参数要调用的函数名,第二个参数是延时的时间.时间到达以后调用tes ...

  2. docker探索-Win10 Docker 安装使用(一)

    本文转自:http://blog.csdn.net/shi1451042748/article/details/52996046 1.前言 Docker最近推出了可以运行在Win10稳定版本,让我们赶 ...

  3. HttpClient-4.3.X 中get和post方法使用

    转自:http://linhongyu.blog.51cto.com/6373370/1538672 一.简介 HttpClient是Apache Jakarta Common下的子项目,用来提供高效 ...

  4. 抽取、转换和装载介绍(三)ETL系统的34个子系统

    这部分对ETL系统的架构中34个关键子系统进行分类.ETL其实可以分为下面四个步骤: 抽取.在ETL环境中从源系统收集原始数据并且在对任何对数据的重要重构发生之前都将数据写入磁盘.子系统1到子系统3都 ...

  5. Linux服务器同步时间

    进行Linux服务器的时间同步是一件需要注意的事情,不然,集群中的服务器时间不同将导致许多奇怪问题发生, 如果没有安装crontab,那么,使用yum install crontabs进行安装和启动, ...

  6. [转]Python Web部署方式总结

    学过PHP的都了解,php的正式环境部署非常简单,改几个文件就OK,用FastCgi方式也是分分钟的事情.相比起来,Python在web应用上的部署就繁杂的多,主要是工具繁多,主流服务器支持不足,在了 ...

  7. vmware下ubuntu不能上网 => 恢复默认虚拟网络

    1.关闭虚拟机ubuntu 2.打开:编辑=> 虚拟网络编辑器 3.打开后点击左下角恢复默认 4.重启ubuntu就可以了

  8. PHP不能不看的50个细节!

    1. 用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量, 单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的”函数”(译注:PHP ...

  9. 『Golang』Martini框架入门

    本文介绍golang中的优秀web开发框架martini! 序 Martini框架是使用Go语言作为开发语言的一个强力的快速构建模块化web应用与服务的开发框架.Martini是一个专门用来处理Web ...

  10. 一些必看的jQuery导航插件和教程

    导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容.这里最大的部分是开发一个菜单,即要直观易用,又要符合你网站的设计风格.本文列举 ...