canvas 二次贝塞尔曲线quadraticCurveTo()

2018-8-9 09:37| 作者: admin| 查看: 3058| 评论: 0|来自: 蚂蚁部落

quadraticCurveTo()方法用来绘制曲线。

本章节只介绍一下此方法如何绘制曲线,而对于曲线弯曲的细节则是严谨的数学问题。

语法结构:

[JavaScript] 纯文本查看 复制代码
context.quadraticCurveTo(cpx,cpy,x,y);

参数解析:

(1).cpx和cpy:必需,贝塞尔曲线控制点的坐标。

(2).x和y:必需,贝塞尔曲线结束点的坐标。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/09/093834drrp69usz22qs22n.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

特别说明:黑色曲线是真正绘制出的贝塞尔曲线,黄色是辅助线。开始点与控制点连接成一条线段,控制点又和结束点连接成一条线段;二次贝塞尔曲线两端和两条线段相切,通过移动控制点的坐标可以绘制出不同的曲线。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
  border:2px dotted red;
}
</style>
<script>
window.onload=function(){
  var canvas = document.getElementById("canvas");
  var range = document.getElementById("range");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(20, 20);
  ctx.quadraticCurveTo(20, 100, 200, 20);
  ctx.stroke();
  ctx.closePath();
 
  ctx.beginPath();
  ctx.moveTo(20, 20);
  ctx.lineTo(20, 100);
  ctx.lineTo(200, 20);
  ctx.stroke();
  ctx.closePath();
 
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

由于只有一个控制点,所以曲线只能在一侧弯曲。

如果需要两侧都有弯曲的曲线参阅canvas bezierCurveTo()一章节。


鲜花

握手

雷人

路过

鸡蛋
上一篇:canvas drawImage()下一篇:canvas arcTo()
返回顶部