0
点赞
收藏
分享

微信扫一扫

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形


此系列教程层层递进,建议按顺序阅读

  • canvas系列教程01——直线、三角形、多边形、矩形、调色板

圆 arc()

cxt.beginPath();
cxt.arc(x,y,半径,开始角度,结束角度, anticlockwise);
cxt.closePath();

  • (x,y)为圆心坐标
  • 开始和结束角度的单位为弧度,推荐写法如下:

120*Math.PI/180   //120°
150*Math.PI/180 //150°

  • anticlockwise表示绘制方向,布尔值
    —— true 逆时针
    —— false 顺时针(默认值)
  • canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_封装

//半圆
cxt.beginPath();
cxt.arc(80, 80, 50, 0, 180*Math.PI/180, true);
cxt.closePath();
//描边
cxt.strokeStyle = "HotPink";
cxt.stroke();
//整圆
cxt.beginPath();
cxt.arc(120, 80, 50, 0, 360*Math.PI/180, true);
cxt.closePath();
//描边
cxt.strokeStyle = "HotPink";
cxt.stroke();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_圆角矩形_02

.beginPath();
cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true);
cxt.closePath();
cxt.strokeStyle = "HotPink";
cxt.stroke();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_圆角矩形_03

.arc(70, 70, 50, 0, -90 * Math.PI / 180, false);

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_canvas_04

//半圆
cxt.beginPath();
cxt.arc(80, 80, 50, 0, 180 * Math.PI / 180, true);
cxt.closePath();
//填充
cxt.fillStyle = "HotPink";
cxt.fill();
//整圆
cxt.beginPath();
cxt.arc(120, 80, 50, 0, 360 * Math.PI / 180, true);
cxt.closePath();
//填充
cxt.fillStyle = "#9966FF";
cxt.fill();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_贝塞尔曲线_05

弧线

方法一 arc() 绘制

//状态描述
cxt.beginPath();
cxt.arc(x,y,半径,开始角度,结束角度, anticlockwise);
//描边
cxt.strokeStyle = "颜色值";
cxt.stroke();

和圆一样,使用arc(),但不需要关闭路径! (即没有 cxt.closePath())

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_贝塞尔曲线_06

.beginPath();
cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true);
cxt.stroke();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_封装_07

stroke()和fill()这两个方法只能绘制当前路径,不能同时绘制几个路径。

//绘制一条直线
cxt.moveTo(20,20);
cxt.lineTo(70,20);
cxt.stroke();

//绘制圆弧+直线
cxt.beginPath();
cxt.arc(70,70,50,0,-90*Math.PI/180,true);
cxt.moveTo(120,70);
cxt.lineTo(120,120);
cxt.stroke();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_封装_08

//绘制一条直线
cxt.moveTo(20,20);
cxt.lineTo(70,20);
// cxt.stroke(); 注释掉之后,此直线不会绘制

//绘制圆弧+直线
cxt.beginPath();
cxt.arc(70,70,50,0,-90*Math.PI/180,true);
cxt.moveTo(120,70);
cxt.lineTo(120,120);
cxt.stroke();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_封装_09

方法二 arcTo() 绘制

cxt.arcTo(cx,cy,x2,y2,radius);

一般由moveTo()或lineTo()提供开始点

  • cx,cy 为控制点坐标
  • x2,y2 为结束点坐标
  • radius 是圆弧半径
  • canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_圆角矩形_10

  • arcTo()方法绘制的弧线是两个切点之间长度最短的那个圆弧。此外,如果开始点不是弧线起点,arcTo()方法还将添加一条当前端点到弧线起点的直线线段。也就是说,开始点坐标并不一定是弧线起点坐标。

.moveTo(20,20);
cxt.lineTo(70,20);
cxt.arcTo(120,20,120,70,50);
cxt.lineTo(120,120);
cxt.stroke();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_canvas_11

.moveTo(20,20);
// cxt.lineTo(70,20); 注释掉后,仍会画直线!
cxt.arcTo(120,20,120,70,50);
cxt.lineTo(120,120);
cxt.stroke();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_封装_12

圆角矩形

方法一 直线和弧线拼接

.moveTo(40,20);
cxt.lineTo(160,20);
cxt.arcTo(180,20,180,40,20);
cxt.moveTo(180,40);
cxt.lineTo(180,110);
cxt.arcTo(180,130,160,130,20);
cxt.moveTo(160,130);
cxt.lineTo(40,130);
cxt.arcTo(20,130,20,110,20);
cxt.moveTo(20,110);
cxt.lineTo(20,40);
cxt.arcTo(20,20,40,20,20);
cxt.stroke();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_封装_13

方法二 封装一个专门绘制圆角矩形的函数

/*
* createRoundedRect()用于绘制圆角矩形
* width、height:分别表示长和宽
* r:表示圆角半径
* offsetX、offsetY:分别表示左上角顶点坐标
*/
function createRoundedRect(cxt, width, height, r, offsetX,) {
cxt.beginPath();
cxt.moveTo(offsetX + r, offsetY);
cxt.lineTo(offsetX + width - r, offsetY);
cxt.arcTo(offsetX + width, offsetY, offsetY + width, offsetY + r, r);
cxt.lineTo(offsetX + width, offsetY + height - r);
cxt.arcTo(offsetX + width, offsetY + height, offsetX + width - r, offsetY + height, r);
cxt.lineTo(offsetX + r, offsetY + height);
cxt.arcTo(offsetX, offsetY + height, offsetX, offsetY + height - r, r);
cxt.lineTo(offsetX, offsetY + r);
cxt.arcTo(offsetX, offsetY, offsetX + r, offsetY, r);
cxt.closePath();
}

createRoundedRect(cxt, 100, 100, 20, 20, 20);
cxt.fillStyle = "HotPink";
cxt.fill();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_贝塞尔曲线_14

曲线

从理论上来说,任何复杂的图形都可以用贝塞尔曲线绘制出来

二次贝塞尔曲线

二次贝塞尔曲线有一个控制点,只能向一个方向弯曲

cxt.quadraticCurveTo(cx , cy , x2,y2);

一般由moveTo()或lineTo()提供开始点

  • cx,cy 为控制点坐标
  • x2,y2 为结束点坐标
  • canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_贝塞尔曲线_15

  • 绘制原理可以参考下图:
  • canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_canvas_16

.moveTo(30, 120);
cxt.quadraticCurveTo(100, 20, 160, 120);
cxt.stroke();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_贝塞尔曲线_17

实战范例:气泡

.moveTo(75, 25);
cxt.quadraticCurveTo(25, 25, 25, 62);
cxt.quadraticCurveTo(25, 100, 50, 100);
cxt.quadraticCurveTo(50, 120, 30, 125);
cxt.quadraticCurveTo(60, 120, 65, 100);
cxt.quadraticCurveTo(125, 100, 125, 62);
cxt.quadraticCurveTo(125, 25, 75, 25);
cxt.stroke();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_贝塞尔曲线_18

三次贝塞尔曲线

三次贝塞尔曲线有两个控制点,可以绘制出波浪线

cxt.bezierCurveTo(cx1 , cy1 , cx2 , cy2 , x , y);

一般由moveTo()或lineTo()提供开始点

  • cx1,cy1 为控制点1的坐标
  • cx2,cy2 为控制点2的坐标
  • x,y 为结束点坐标
  • canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_贝塞尔曲线_19

  • 绘制原理可参考下图:
  • canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_封装_20

//绘制三次贝塞尔曲线
cxt.moveTo(20, 80);
var cx1 = 20;
var cy1 = 20;
var cx2 = 120;
var cy2 = 120;
var endX = 120;
var endY = 60;
cxt.bezierCurveTo(cx1, cy1, cx2, cy2, endX, endY);
cxt.stroke();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_圆角矩形_21

实战范例:心形

.moveTo(75, 40);
cxt.bezierCurveTo(75, 37, 70, 25, 50, 25);
cxt.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
cxt.bezierCurveTo(20, 80, 40, 102, 75, 120);
cxt.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
cxt.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
cxt.bezierCurveTo(85, 25, 75, 37, 75, 40);
cxt.stroke();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_贝塞尔曲线_22

实战范例:N叶草

/*
* createLeaf()用于绘制N叶草
* n:n片
* dx、dy:叶子中心位置的坐标
* size:控制叶子的大小
* length:控制叶子长度
*/
function createLeaf(cxt, n, dx, dy, size,) {
cxt.beginPath();
cxt.moveTo(dx, dy + size);
var degree = 2 * Math.PI / n;
for (var i = 1; i < n + 1; i++) {
//计算控制点的坐标
var cx1 = Math.sin((i - 1) * degree) * length + dx;
var cy1 = Math.cos((i - 1) * degree) * length + dy;
var cx2 = Math.sin(i * degree) * length + dx;
var cy2 = Math.cos(i * degree) * length + dy;
//计算结束点的坐标
var x = Math.sin(i * degree) * size + dx;
var y = Math.cos(i * degree) * size + dy;
cxt.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
}
cxt.closePath();
}

createLeaf(cxt, 4, cnv.width/2, cnv.height/2, 20, 80);
//定义填充颜色为浅绿色
cxt.fillStyle = "#00FF99";
cxt.fill();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_圆角矩形_23

扇形

封装绘制扇形的函数 createSector

function createSector(cxt, x, y, r, angle1,) {
cxt.beginPath();
cxt.moveTo(x, y);
cxt.arc(x, y, r, angle1 * Math.PI / 180, angle2 * Math.PI / 180, false);
cxt.closePath();
}

createSector(cxt, cnv.width / 2, cnv.height / 2, 50, 30, 120);
cxt.fillStyle = "HotPink";
cxt.fill();

canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形_贝塞尔曲线_24


举报

相关推荐

0 条评论