1、二次贝塞尔曲线

　　quadraticCurveTo(cpx,cpy,x,y)　　//cpx，cpy表示控制点的坐标, x，y表示终点坐标；

数学公式表示如下：

二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪：

代码实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>canvas直线</title>

<meta name="Keywords" content="">

<meta name="author" content="@my_programmer">

<style type="text/css">

    body, h1{margin:0;}

    canvas{margin: 20px;}

</style>

</head>

<body onload="draw()">

    <h1>二次贝塞尔曲线</h1>

    <canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas>

<script>

    function draw() {

        var canvas=document.getElementById('canvas');

        var context=canvas.getContext('2d');

         //绘制起始点、控制点、终点

          context.beginPath();

          context.moveTo(20,170);

          context.lineTo(130,40);

          context.lineTo(180,150);

          context.stroke();            

          //绘制2次贝塞尔曲线

          context.beginPath();

          context.moveTo(20,170);

          context.quadraticCurveTo(130,40,180,150);

          context.strokeStyle = "red";

          context.stroke();

}

</script>

</body>

</html>

代码效果：

2、三次贝塞尔曲线

　　bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)　　//cp1x，cp1y表示第一个控制点的坐标, cp2x，cp2y表示第二个控制点的坐标, x，y表示终点的坐标；

数学公式表示如下：

P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P0走向P1，并从P2的方向来到P3。一般不会经过P1或P2；这两个点只是在那里提供方向资讯。P0和P1之间的间距，决定了曲线在转而趋进P3之前，走向P2方向的“长度有多长”。

代码实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>canvas直线</title>

<meta name="Keywords" content="">

<meta name="Description" content="">

<style type="text/css">

    body, h1{margin:0;}

    canvas{margin: 20px; }

</style>

</head>

<body onload="draw()">

    <h1>三次贝塞尔曲线</h1>

    <canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas>

<script>

    function draw() {

        var canvas=document.getElementById('canvas');

        var context=canvas.getContext('2d');

       //绘制起始点、控制点、终点

       context.beginPath();

       context.moveTo(25,175);

       context.lineTo(60,80);

       context.lineTo(150,30);

       context.lineTo(170,150);

       context.stroke();  

       //绘制3次贝塞尔曲线

       context.beginPath();

       context.moveTo(25,175);

       context.bezierCurveTo(60,80,150,30,170,150);

       context.strokeStyle = "red";

       context.stroke();

}

</script>

</body>

</html>

代码效果图：

【作者】：@挨踢前端
【出处】：https://www.cnblogs.com/duanhuajian/archive/2012/10/15/2725096.html
【声明】：所有博文标题后加（share）的表示收集的他人优秀文章，其余的则为原创。欢迎转载，但请在显要位置显示本文链接，并保留本段声明，否则追究法律责任，谢谢！

HTML5实战—canvas绘图之贝塞尔曲线的更多相关文章

  1. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  2. 基于canvas二次贝塞尔曲线绘制鲜花

    canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...

  3. Canvas中绘制贝塞尔曲线

    ① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...

  4. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  5. HTML5之Canvas绘图(一) ——基础篇

    HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是 ...

  6. 【HTML5】Canvas绘图详解-1

    ----->Canvas绘制基础 1,线条绘制 1-1,线条组成的图形和beginPath 案例:绘制由不同颜色的线条组成的图案 1-2,多边形的填充和closePath 案例:绘制封闭具有填充 ...

  7. HTML5之Canvas绘图实例——饼状图

    实现饼状分布画图(如下):调试环境:Firefox

  8. HTML5之Canvas绘图实例——曲线图

    实现正弦.余弦和正切函数画图(如下图):调试环境:Firefox

  9. HTML5七巧板canvas绘图（复习）

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  10. HTML5七巧板canvas绘图

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. redux的三个概念与三大核心

    1.什么是redux?一个组件里可能会有很多的状态,比如控制某个内容显示的flag,从后端获取的展示数据,那么这些状态可以在自己的单个页面进行管理,也可以选择别的管理方式,redux就是是一种状态管理 ...

  2. 2023牛客暑期多校训练营7 CGILM

    比赛链接 C 题解 知识点:位运算,贪心. 我们用分段的思想考虑大小关系,若在同一段则大小不能确定,一开始为 \([1,n]\) . 我们按位从高到低考虑,某位如果 \(b_i\) 产生了 \(1\) ...

  3. H5用canvas放烟花

    很久很久以前的一个很流行的java Applet放烟花效果,当初移到android过,这次摸鱼时间翻译成js代码,用canvas实现这么多年,终于能大致看懂这代码了, 已经实现透明效果,只需要给bod ...

  4. [ABC141E] Who Says a Pun?

    2023-02-17 题目 题目传送门 翻译 翻译 难度&重要性(1~10):4 题目来源 AtCoder 题目算法 dp,字符串 解题思路 看到求两个完全相同的子串时,我们可以发现其与求最长 ...

  5. P2024 [NOI2001] 食物链 || #576. 食物链【NOI2001】 （并查集）

    空降锣鼓 空降OJ 题解: #include<bits/stdc++.h> using namespace std; int n,k; int d,x,y; int ans; int fa ...

  6. Pycharm远程连接到服务器运行错误can‘t open file ‘tmp

    Pycharm远程连接到服务器运行错误can't open file '/tmp/.../a.py': [Errno 2] No such file or directory 问题描述 win11 P ...

  7. RK3568开发笔记（十一）：开发版buildroot固件移植一个ffmpeg播放rtsp的播放器Demo

    前言   目标开发任务还有个功能,就是播放rtsp摄像头,当然为了更好的坐这个个,我们必须支持rtsp播放失败之后重新尝试,比如5s重新尝试打开一次,从而保障联网后重新打开,然后达成这个功能.   D ...

  8. Dubbo源码浅析（一）—RPC框架与Dubbo

    一.什么是RPC 1.1 RPC概念 RPC,Remote Procedure Call 即远程过程调用,与之相对的是本地服务调用,即LPC(Local Procedure Call).本地服务调用比 ...

  9. QFluentWidgets: 基于 C++ Qt 的 Fluent Design 组件库

    简介 QFluentWidgets 是一个基于 Qt 的 Fluent Designer 组件库,内置超过 150 个开箱即用的 Fluent Designer 组件,支持亮暗主题无缝切换和自定义主题 ...

  10. GO语言基础之基本运算符

    GO语言基础之基本运算符 目录 GO语言基础之基本运算符 一.运算符 内置运算符: 二.算术运算符 三.关系运算符 四.逻辑运算符 五.位运算符 六.赋值运算符 一.运算符 作用:运算符用于在程序运行 ...