画一个圆
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 坐标)