canvas入门(五)贝塞尔曲线

本文介绍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中的旋转,偏移之类的效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风舞红枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值