context.quadraticCurveTo() context.bezierCurveTo()详解
使用quadraticCurveTo()描绘2维的贝塞尔曲线，之前的坐标点与当前坐标点之间以2维贝塞尔曲线连接。参数cpx与cpy表示贝塞尔曲线的控制点坐标，参数x，y为新追加的坐标点，指定的坐标点都以canvas元素的左上端为基准点。
什么是贝塞尔曲线
所谓的贝塞尔就是根据控制点算出的曲线，当需要曲线时一般使用贝塞尔曲线绘画。
quadraticCurveTo(cpx, cpy, x, y)方法由1个控制点与1个追加坐标点绘制2维贝塞尔曲线。 context . bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)方法则是由2个控制点和1个追加坐标点绘制3维贝塞尔曲线。
绘制2维贝塞尔曲线的步骤如下：
- 使用beginPath()方法宣布开始绘画路径
- 使用moveTo(x,y)指定开始位置的坐标
- 使用quadraticCurveTo(x,y)绘制2维贝塞尔曲线
- 使用stroke()方法表示路径的轮廓
| 值 | 说明 | 实例 |
|---|---|---|
| cpx | 控制点的x坐标值。 | |
| cpy | 控制点的y坐标值 | |
| x | 从当前坐标延伸2维贝塞尔曲线的x坐标。 | |
| h | 从当前坐标延伸2维贝塞尔曲线的y坐标。 |
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
context.moveTo(100,20);
context.quadraticCurveTo(150,100);
context.stroke();
| 值 | 说明 | 实例 |
|---|---|---|
| x | 绘制当前路径开始点的x坐标值。 | |
| y | 绘制当前路径开始点的y坐标值 |
使用HTML+JavaScript的方法，绘画例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用canvas绘制图像</title>
<script type="text/javascript">
<!--
function test() {
//建立绘画环境
var canvas = document.getElementById('sample1');
if (canvas.getContext) {
var context = canvas.getContext('2d');
//以下指定具体的绘画内容
context.beginPath(); //开始新的路径
context.moveTo(60,120);//路径的开始位置的坐标
context.quadraticCurveTo(150,20,250,100); //路径的轮廓
context.stroke(); //显示当前路径的轮廓
}
}
//-->
</script>
</head>
<body onLoad="test()">
<h2>使用canvas绘制图像</h2>
<canvas width="300" height="150" id="sample1" style="">
只有支持canvas元素的浏览器才能正常显示图像。
</canvas>
</body>
</html>
