绘制曲线，经常会用到路径的知识，如果你对路径有疑问，可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解.

arc：画弧度

cxt.arc( x, y, 半径, 开始角度，结束角度，是否逆时针 );

x, y: 为弧度的中心横坐标和纵坐标，如果这是画一个圆.那么x,y就是圆的圆心.

开始角度与结束角度都是以弧度单位，弧度与角度的换算关系为： 弧度=角度*(π/180°）。

以时钟为参考，3点钟方向为0度，6点钟方向为90度，9点钟方向为180度，12点钟方向为270度.

第五个参数：true为逆时针，false为顺时针，默认值为false

在canvas的中心，换一个从0度方向开始，逆时针到270度方向的一段圆弧：

 <style>

 body {

     background: #000;

 }

 #canvas{

     background:white;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' ),

         width = oCanvas.width, height = oCanvas.height;

     oGc.arc( width / 2, height / 2, height / 2, 0, 270 * Math.PI / 180, true );

     oGc.stroke();

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="300"></canvas>

如果是顺时针，就用这段：

oGc.arc( width / 2, height / 2, height / 2, 0, 270 * Math.PI / 180, false );
 
                                

如果采用闭合路径，弧度的起始点就会相连

 oGc.arc( width / 2, height / 2, height / 2, 0, 270 * Math.PI / 180, true );

 oGc.closePath();

 oGc.stroke();
 oGc.arc( width / 2, height / 2, height / 2, 0, 270 * Math.PI / 180, false );

 oGc.closePath();

 oGc.stroke();

                           

画两个不同颜色的圆形：

 <style>

 body {

     background: #000;

 }

 #canvas{

     background:white;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' );

     oGc.beginPath();

     oGc.strokeStyle = '#09f';

     oGc.arc( 150, 150, 150, 0, 360 * Math.PI / 180 );

     oGc.closePath();

     oGc.stroke();

     oGc.beginPath();

     oGc.strokeStyle = 'orange';

     oGc.arc( 450, 150, 150, 0, 360 * Math.PI / 180 );

     oGc.closePath();

     oGc.stroke();

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="300"></canvas>

 </body>

画两个填充圆形，把上面的例子，stoke方式改成fill方式即可.

     oGc.beginPath();

     oGc.fillStyle = '#09f';

     oGc.arc( 150, 150, 150, 0, 360 * Math.PI / 180 );

     oGc.closePath();

     oGc.fill();

     oGc.beginPath();

     oGc.fillStyle = 'orange';

     oGc.arc( 450, 150, 150, 0, 360 * Math.PI / 180 );

     oGc.closePath();

     oGc.fill();

画一个圆角：

 <style>

 body {

     background: #000;

 }

 #canvas{

     background:white;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' );

     oGc.moveTo( 150, 50 );

     oGc.lineTo( 250, 50 );

     oGc.stroke();

     oGc.beginPath();

     oGc.arc( 250, 100, 50, 270 * Math.PI / 180, 0, false );

     oGc.moveTo( 300, 100 );

     oGc.lineTo( 300, 200 );

     oGc.stroke();

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="300"></canvas>

 </body>

[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)的更多相关文章

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

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

  2. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  3. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  4. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  5. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  6. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  7. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  8. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  9. [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法

    canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的.canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支 ...

随机推荐

  1. 面试的妹纸问我：web缓存设置不是后台的事情吗？

    背景介绍 团队最近在招前端开发,早上收到一封简历,是个妹纸,从技能点来看还算符合要求,于是约了下午3点过来面试. 整个面试过程持续了大约40分钟,问的题目也比较常规,其中一道题就是"常见的性 ...

  2. python版mapreduce题目实现寻找共同好友

    看到一篇不知道是好好玩还是好玩玩童鞋的博客,发现一道好玩的mapreduce题目,地址http://www.cnblogs.com/songhaowan/p/7239578.html 如图 由于自己太 ...

  3. 简单利用HTTP中的PUT协议拿下SHELL

    第一次用方法拿shell,之前遇到的都是没有写入权限的. 站太辣鸡,纯粹练手,就不打码了. 此次实战会用到的HTTP请求方法: OPTIONS,PUT,MOVE/COPPY * 战前准备 0x01 什 ...

  4. 线性代数-矩阵-【3】矩阵加减 C和C++实现

    点击这里可以跳转至 [1]矩阵汇总:http://www.cnblogs.com/HongYi-Liang/p/7287369.html [2]矩阵生成:http://www.cnblogs.com/ ...

  5. Response.Write 、RegisterClientScriptBlock和RegisterStartupScript总结

    Response.Write .RegisterClientScriptBlock和RegisterStartupScript总结 Page.ClientScript.RegisterStartupS ...

  6. 再起航，我的学习笔记之JavaScript设计模式17(模板方法模式)

    模板方法模式 由模板方法模式开始我们正式告别结构型设计模式,开始行为型设计模式的学习分享 行为型设计模式用于不同对象之间职责划分或算法抽象,行为型设计模式不仅仅涉及类和对象,还涉及类或对象之间的交流模 ...

  7. selenium实战学习第一课

    #-*- coding:utf-8 -*- __author__ = "carry" from selenium import webdriver from selenium.we ...

  8. PHP字符串和数组

    php常用函数和数组 字符串替换 , 分割字符串(字符串转数组),  拼接数组的值(数组组转字符串) , 格式化输出  查找字符首次出现的位置 , 获取字符串长度 以一个数组作为key另一个数组作为v ...

  9. SQL Server锁类型

    SQL Server锁类型(SQL)收藏 1． HOLDLOCK: 在该表上保持共享锁,直到整个事务结束,而不是在语句执行完立即释放所添加的锁. 2． NOLOCK:不添加共享锁和排它锁,当这个选项生 ...

  10. Oracle数据库中直方图对执行计划的影响

    在Oracle数据库中,CBO会默认目标列的数据在其最小值low_value和最大值high_value之间均匀分布,并按照均匀分布原则,来计算目标列 施加查询条件后的可选择率以及结果集的cardin ...