之前，我写了一个arc函数的用法：[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形).

arcTo:

cxt.arcTo( cx, cy, x2, y2, 半径 )

cx,cy表示控制点的坐标，x2,y2表示结束点的坐标，如果我们想画一条弧线，需要提供3个坐标，开始点，控制点和结束点. 开始点一般可以通过moveTo或者lineTo提供.arcTo提供控制点和结束点.

 <style>

     body {

         background: #000;

     }

     #canvas {

         background: white;

     }

 </style>

 <script>

     window.onload = function () {

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

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

         var x1 = 50,

             y1 = 100,

             cx = 500,

             cy = 100,

             x2 = 450,

             y2 = 200;

         oGc.lineWidth = '2px';

         oGc.strokeStyle = 'red';

         oGc.moveTo( x1, y1 );

         oGc.arcTo( cx, cy, x2, y2, 50 );

         oGc.stroke();

     }

 </script>

 </head>

 <body>

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

 </body>

加大半径( 其他代码保持不变，半径调成100 ）弧度将会变大!

oGc.arcTo( cx, cy, x2, y2, 100 );

如果调整结束点，把结束点与控制点形成一个直角，那么弧度将不会这么弯曲

 var x1 = 50,

             y1 = 100,

             cx = 500,

             cy = 100,

             x2 = 500,

             y2 = 200;

         oGc.lineWidth = '2px';

         oGc.strokeStyle = 'red';

         oGc.moveTo( x1, y1 );

         oGc.arcTo( cx, cy, x2, y2, 100 );

         oGc.stroke();

如果把开始点的横坐标放大，半径也放大，那么得到的形状是这样的!

 var x1 = 400,

     y1 = 100,

     cx = 500,

     cy = 100,

     x2 = 500,

     y2 = 200;

 oGc.lineWidth = '2px';

 oGc.strokeStyle = 'red';

 oGc.moveTo( x1, y1 );

 oGc.arcTo( cx, cy, x2, y2, 300 );

 oGc.stroke();

看到这些形状，你知道他能用在哪些地方吗？

贝塞尔曲线：

如果你初次了解贝塞尔曲线，这里有一篇非常不错的文章可以参考下:

http://www.html-js.com/article/1628

再来一个工具，这个工具提供了canvas中贝塞尔曲线的开始点，控制点与结束点的坐标：

http://myst729.github.io/bezier-curve/

canvas二次贝塞尔曲线的函数语法：

cxt.quadraticCurveTo( cx, cy, x2, y2 );

cx,cy控制点坐标，x2,y2:结束点坐标, 开始点一般由moveTo, lineTo提供.

画一个二次贝塞尔曲线：

 <style>

     body {

         background: #000;

     }

     #canvas {

         background: white;

     }

 </style>

 <script>

     window.onload = function () {

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

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

         oGc.strokeStyle = 'red';

         oGc.moveTo( 140, 80 );

         oGc.quadraticCurveTo( 411, 77, 418, 277 );

         oGc.stroke();

     }

 </script>

 </head>

 <body>

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

 </body>

    

三次贝塞尔曲线

canvas三次贝塞尔曲线的函数语法：

cxt.bezierCurveTo( cx1, cy1, cx2, cy2, x2, y2 );

cx1,cx2 表示第一个控制点，cx2,cy2表示第二个控制点，x2, y2表示结束点坐标。开始点一般由moveTo, lineTo提供.

画一个三次贝塞尔曲线：

 <style>

     body {

         background: #000;

     }

     #canvas {

         background: white;

     }

 </style>

 <script>

     window.onload = function () {

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

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

         oGc.strokeStyle = 'red';

         oGc.moveTo( 234, 224 );

         oGc.bezierCurveTo( 301, 68, 454, 361, 555, 162 );

         oGc.stroke();

     }

 </script>

 </head>

 <body>

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

 </body>

     

画一个饼图：

 <style>

     body {

         background: #000;

     }

     #canvas {

         background: white;

     }

 </style>

 <script>

     window.onload = function () {

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

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

         oGc.beginPath();

         oGc.fillStyle = 'red';

         oGc.moveTo( 300, 200 );

         oGc.arc( 300, 200, 100, 0 * Math.PI / 180, 120 * Math.PI / 180, false );

         oGc.closePath();

         oGc.fill();

         oGc.beginPath();

         oGc.fillStyle = 'orange';

         oGc.moveTo( 300, 200 );

         oGc.arc( 300, 200, 100, 120 * Math.PI / 180, 240 * Math.PI / 180, false );

         oGc.closePath();

         oGc.fill();

         oGc.beginPath();

         oGc.fillStyle = '#09f';

         oGc.moveTo( 300, 200 );

         oGc.arc( 300, 200, 100, 240 * Math.PI / 180, 360 * Math.PI / 180, false );

         oGc.closePath();

         oGc.fill();

     }

 </script>

 </head>

 <body>

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

 </body>

画一个圆角矩形：

 <style>

     body {

         background: #000;

     }

     #canvas {

         background: white;

     }

 </style>

 <script>

     window.onload = function () {

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

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

         oGc.strokeStyle = 'red';

         oGc.lineWidth = '2px';

         oGc.moveTo( 200, 100 );

         oGc.lineTo( 500, 100 );

         oGc.arcTo( 600, 100, 600, 200, 100 );

         oGc.moveTo( 600, 200 );

         oGc.lineTo( 600, 400 );

         oGc.arcTo( 600, 500, 500, 500, 100 );

         oGc.moveTo( 500, 500 );

         oGc.lineTo( 200, 500 );

         oGc.arcTo( 100, 500, 100, 400, 100 );

         oGc.moveTo( 100, 400 );

         oGc.lineTo( 100, 200 );

         oGc.arcTo( 100, 100, 200, 100, 100 );

         oGc.stroke();

     }

 </script>

 </head>

 <body>

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

 </body>

[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)的更多相关文章

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

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

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

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

  3. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

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

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

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

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

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

  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教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

随机推荐

  1. 微信小程序--ajax服务器交互及页面渲染

    网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx.request 在这 ...

  2. Kettle6.0表输入连接数据库

    kettle6.0表输入我们需要从数据中获取数据的时候,需要和数据库建立连接,简单的说下步骤: 1.双击表输入: 2.点击"新建",输入参数值: 注意:数据库用户名可以通过sql进 ...

  3. oracle语句批处理

    数据量有40万条,从一个对象table_01一条一条取数到对象table_02,如果用原始的 Statement Statmt =comm.createStatement(); String sql= ...

  4. 简单易学的SSM（Spring+SpringMVC+MyBatis）整合

    SSM(Spring+SpringMVC+MyBatis)的整合: 具体执行过程:1.用户在页面向后台发送一个请求 2.请求由DispatcherServlet 前端控制器拦截交给SpringMVC管 ...

  5. svn: Can't convert string from 'UTF-8' to native

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt227 svn 版本库中有文件是以中文字符命名的,在 Linux 下 chec ...

  6. [转]Java中的随机数生成器：Random，ThreadLocalRandom，SecureRandom

     详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp84 Random即:java.util.Random, ThreadL ...

  7. AFN和SDWebImage请求网络图片的一点问题

    问题1.AFN 处理有关图片相关的请求的问题 在使用AFN Post网络图片的时候发现NSLocalizedDescription=Request failed: unacceptable conte ...

  8. 团队作业4--第一次项目冲刺（Alpha版本）7

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.完成全部基础功能 2.完成一些小改进与优化 四.困难与问题 软件基本是可以运行并且正常使用,但还没有实战过,遇到的问题与困 ...

  9. Alpha 版本测试和发布说明

    Alpha版本测试报告 一bug汇总 做题时答案是错的.(已修复) 每次生成的题目一样(已经修复) 计时没有显示即倒计时,难度不同的功能没有实现(打算修复) 没有导入试卷和错题功能(不打算修复) 二. ...

  10. 团队作业10——Beta版本事后诸葛亮

    事后诸葛亮分析 1.总结的提纲内容: a. 项目管理之事后诸葛亮会议. 一.设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件要解决的是教师需要 ...