【css】使用 canvas 画一个圆、贝塞尔曲线画对话气泡

画一个圆

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); // 返回一个用于在画布上绘图的环境

ctx.beginPath(); // 开始一条路径
ctx.arc(75, 75, 50, 0, 2 * Math.PI); 
ctx.stroke(); // 进行绘制

arc(圆心的 x 轴坐标，圆心的 y 轴坐标，圆弧的半径，圆弧的起始点，圆弧的终点)

贝塞尔曲线

HTML

<canvas id="canvas"></canvas>

JavaScript

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    // 二次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(75, 25); // 定义开始点
    ctx.quadraticCurveTo(25, 25, 25, 62.5);
    ctx.quadraticCurveTo(25, 100, 50, 100);
    ctx.quadraticCurveTo(50, 120, 30, 125);
    ctx.quadraticCurveTo(60, 120, 65, 100);
    ctx.quadraticCurveTo(125, 100, 125, 62.5);
    ctx.quadraticCurveTo(125, 25, 75, 25);
    ctx.stroke();
   }
}

draw()

quadraticCurveTo(控制点的 x 坐标，控制点的 y 坐标，结束点的 x 坐标，结束点的 y 坐标)