html5之canvas，arcTo（弧度与二次，三次贝塞尔曲线以及在线工具）

地摊大王尹志仁 03-23 261

前言：

眼前大家对“js html5画曲线”大概比较关心，各位老铁们都想要知道一些“js html5画曲线”的相关知识。那么小编也在网上汇集了一些对于“js html5画曲线””的相关文章，希望朋友们能喜欢，我们快快来学习一下吧！

arcTo:

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

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

1 <style> 2 body { 3 background: #000; 4 } 5 6 #canvas { 7 background: white; 8 } 9 </style>10 <script>11 window.onload = function () {12 var oCanvas = document.querySelector("#canvas"),13 oGc = oCanvas.getContext('2d');14 15 var x1 = 50,16 y1 = 100,17 cx = 500,18 cy = 100,19 x2 = 450,20 y2 = 200;21 oGc.lineWidth = '2px';22 oGc.strokeStyle = 'red';23 oGc.moveTo( x1, y1 );24 oGc.arcTo( cx, cy, x2, y2, 50 );25 oGc.stroke();26 }27 </script>28 </head>29 <body>30 <canvas id="canvas" width="800" height="600"></canvas>31 </body>

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

推荐下我的前端群：524262608，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。

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

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

1 var x1 = 50, 2 y1 = 100, 3 cx = 500, 4 cy = 100, 5 x2 = 500, 6 y2 = 200; 7 oGc.lineWidth = '2px'; 8 oGc.strokeStyle = 'red'; 9 oGc.moveTo( x1, y1 );10 oGc.arcTo( cx, cy, x2, y2, 100 );11 oGc.stroke();

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

1 var x1 = 400, 2 y1 = 100, 3 cx = 500, 4 cy = 100, 5 x2 = 500, 6 y2 = 200; 7 oGc.lineWidth = '2px'; 8 oGc.strokeStyle = 'red'; 9 oGc.moveTo( x1, y1 );10 oGc.arcTo( cx, cy, x2, y2, 300 );11 oGc.stroke();

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

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

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

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

画一个二次贝塞尔曲线：

1 <style> 2 body { 3 background: #000; 4 } 5 #canvas { 6 background: white; 7 } 8 </style> 9 <script>10 window.onload = function () {11 var oCanvas = document.querySelector("#canvas"),12 oGc = oCanvas.getContext('2d');13 14 oGc.strokeStyle = 'red';15 oGc.moveTo( 140, 80 );16 oGc.quadraticCurveTo( 411, 77, 418, 277 );17 oGc.stroke();18 }19 </script>20 </head>21 <body>22 <canvas id="canvas" width="800" height="600"></canvas>23 </body>

三次贝塞尔曲线

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

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

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

画一个三次贝塞尔曲线：

1 <style> 2 body { 3 background: #000; 4 } 5 #canvas { 6 background: white; 7 } 8 </style> 9 <script>10 window.onload = function () {11 var oCanvas = document.querySelector("#canvas"),12 oGc = oCanvas.getContext('2d');13 14 oGc.strokeStyle = 'red';15 oGc.moveTo( 234, 224 );16 oGc.bezierCurveTo( 301, 68, 454, 361, 555, 162 );17 oGc.stroke();18 }19 </script>20 </head>21 <body>22 <canvas id="canvas" width="800" height="600"></canvas>23 </body>

画一个饼图：

1 <style> 2 body { 3 background: #000; 4 } 5 #canvas { 6 background: white; 7 } 8 </style> 9 <script>10 window.onload = function () {11 var oCanvas = document.querySelector("#canvas"),12 oGc = oCanvas.getContext('2d');13 14 oGc.beginPath();15 oGc.fillStyle = 'red';16 oGc.moveTo( 300, 200 );17 oGc.arc( 300, 200, 100, 0 * Math.PI / 180, 120 * Math.PI / 180, false );18 oGc.closePath();19 oGc.fill();20 21 oGc.beginPath();22 oGc.fillStyle = 'orange';23 oGc.moveTo( 300, 200 );24 oGc.arc( 300, 200, 100, 120 * Math.PI / 180, 240 * Math.PI / 180, false );25 oGc.closePath();26 oGc.fill();27 28 oGc.beginPath();29 oGc.fillStyle = '#09f';30 oGc.moveTo( 300, 200 );31 oGc.arc( 300, 200, 100, 240 * Math.PI / 180, 360 * Math.PI / 180, false );32 oGc.closePath();33 oGc.fill();34 }35 </script>36 </head>37 <body>38 <canvas id="canvas" width="800" height="600"></canvas>39 </body>

画一个圆角矩形：

1 <style> 2 body { 3 background: #000; 4 } 5 #canvas { 6 background: white; 7 } 8 </style> 9 <script>10 window.onload = function () {11 var oCanvas = document.querySelector("#canvas"),12 oGc = oCanvas.getContext('2d');13 14 oGc.strokeStyle = 'red';15 oGc.lineWidth = '2px';16 oGc.moveTo( 200, 100 );17 oGc.lineTo( 500, 100 );18 oGc.arcTo( 600, 100, 600, 200, 100 );19 oGc.moveTo( 600, 200 );20 oGc.lineTo( 600, 400 );21 oGc.arcTo( 600, 500, 500, 500, 100 );22 oGc.moveTo( 500, 500 );23 oGc.lineTo( 200, 500 );24 oGc.arcTo( 100, 500, 100, 400, 100 );25 oGc.moveTo( 100, 400 );26 oGc.lineTo( 100, 200 );27 oGc.arcTo( 100, 100, 200, 100, 100 );28 oGc.stroke();29 }30 </script>31 </head>32 <body>33 <canvas id="canvas" width="800" height="600"></canvas>34 </body>

原文：

本文地址：http://www.longkongtuishu.com/ca2f7AmsEBVsDCg.html

标签： #js html5画曲线