ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Canvas 基础(三):画曲线(quadraticCurveTo 和 bezierCurveTo)

2022-05-04 19:36:18  阅读:323  来源: 互联网

标签:quadraticCurveTo P2 Canvas P1 bezierCurveTo ctx 曲线 贝塞尔 坐标


前言

画布中画曲线要用到二次贝塞尔曲线或三次贝塞尔曲线。贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如 PhotoShop。

二次贝塞尔曲线

二次贝塞尔曲线在一个平面中有三个点构成,P0、P1 和 P2。如下图,黑色的点与绿色线段的两端同时运动画出贝塞尔曲线,P0 是贝塞尔曲线的起始点,P1 决定的贝塞尔曲线的控制点,P2 是贝塞尔曲线的结束点

image

在 Canvas 中绘制二次贝塞尔曲线是 quadraticCurveTo(cpx, cpy, x, y) 函数,函数中有四个参数:

  1. cpx:贝塞尔控制点的 x 坐标,图中 P1 在画布中的 x 坐标;
  2. cpy:贝塞尔控制点的 y 坐标,图中 P1 在画布中的 y 坐标;
  3. x:结束点的 x 坐标,图中 P2 在画布中的 x 坐标;
  4. y:结束点的 y 坐标,图中 P2 在画布中的 y 坐标。
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(10, 200); // P0 的起始坐标
ctx.quadraticCurveTo(60, 80, 200, 200);
ctx.lineWidth = 2;
ctx.strokeStyle = '#ff0000';
ctx.stroke();

确定路径的起始点,也就是moveTo(10, 200)。用二次贝塞尔曲线绘制曲线,前两个参数是贝塞尔曲线的控制点,也就是 P1;后两个参数是贝塞尔曲线最终运动的结束点,也就是 P2。

三次贝塞尔曲线

标签:quadraticCurveTo,P2,Canvas,P1,bezierCurveTo,ctx,曲线,贝塞尔,坐标
来源: https://www.cnblogs.com/shiramashiro/p/16222080.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有