canvas入门（五）贝塞尔曲线

风舞红枫

已于 2022-01-27 16:47:23 修改

阅读量428

点赞数 2

CC 4.0 BY-SA版权

分类专栏： canvas 文章标签： javascript html5 前端

于 2019-03-26 22:21:33 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42231248/article/details/88832092

canvas 专栏收录该内容

38 篇文章

订阅专栏

本文介绍Canvas中二次及三次贝塞尔曲线的绘制方法，并演示如何使用clearRect清除画布。通过实例代码，帮助读者掌握曲线绘制的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas入门系列

canvas入门（一）绘制线与正方形
 canvas入门（二）标签width与style:width的区别
 canvas入门（三）绘制代码分块
 canvas入门（四）绘制线的扩展api
canvas入门（五）贝塞尔曲线
 canvas入门（六）旋转、偏移、缩放
 canvas入门（七）中心旋转

这一节主要给大家分享两个曲线————二次贝塞尔曲线和三次贝塞尔曲线

二次贝塞尔曲线示例

<script type="text/javascript">
window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(50, 50);
  context.quadraticCurveTo(100, 100, 200, 50);
  context.stroke();
  context.closePath();
}
</script>

运行结果如下
在这里插入图片描述
参数细解
context.moveTo(a, b); 绘制起点
context.quadraticCurveTo(c, d, e, f); 前两个参数控制曲线的弯曲程度,c,d 后两个参数控制曲线的终点e,f

演示网址推荐

blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html

三次贝塞尔曲线示例

<script type="text/javascript">
window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(50, 50);
  context.bezierCurveTo(100, 100, 150,0,200, 50);
  context.stroke();
  context.closePath();
}
</script>

运行结果如下
在这里插入图片描述
参数细解
context.moveTo(a, b); 绘制起点
context.bezierCurveTo(c, d, e, f ,g ,h); c,d控制第一次弯曲程度,e,f控制第二次弯曲程度,g,h终点

演示网址推荐

http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html

本节最后一个知识点，清空画布clearRect
在上述代码最后新添一行代码context.clearRect(0,0,canvas.width,canvas.height);

<script type="text/javascript">
window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(50, 50);
  context.bezierCurveTo(100, 100, 150,0,200, 50);
  context.stroke();
  context.closePath();
  context.clearRect(0,0,canvas.width,canvas.height); 
}
</script>

运行之后你就会发现画布空空如也
参数细解
context.clearRect(a,b,c,d); a,b起点,c从起点开始向右宽度,d从起点开始向下高度;
既然有clearRect,那是不是自然有rect,这个留给大家自己去学习
最后给大家分享一个小细节,学习到的代码中的moveTo其实可以换成lineTo,实现的效果与之前的一模一样。
下一节将会为大家分享一些canvas中的旋转,偏移之类的效果