H5绘制曲线
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#myCanvas{
box-shadow: 0 0 5px black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
//quadraticCurveTo(cpx, cpy, x, y) 控制点的坐标，结束点坐标
//设置开始点
ctx.moveTo(0,500);
ctx.quadraticCurveTo(0,0,500,0);
ctx.stroke();
//三次贝塞尔曲线
ctx.moveTo(0,500);
//bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 两对控制点，结束点位置
//绘制直线
ctx.bezierCurveTo(0,500,500,0,500,0);
//绘制曲线
ctx.moveTo(0,500);
ctx.bezierCurveTo(0,0,500,500,500,0);
ctx.stroke();
</script>
</html>
bezierCurveTo()方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。三次贝塞尔曲线需要三个点，前两个用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点，曲线的开始点是当前路径中的最后一个点。如果路径不存在，使用beginPath()和moveTo()方法来定义开始点。quadraticCurveTo()方法用来绘制二次贝塞尔曲线。
扫一扫
365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
