Canvas 基础图形绘制 — 矩形、圆形、曲线、多边形

画线与文本

矩形填充与描边

绘制矩形的 API:

1
2
3
4
5
interface CanvasRect {
clearRect(x: number, y: number, w: number, h: number): void;
fillRect(x: number, y: number, w: number, h: number): void;
strokeRect(x: number, y: number, w: number, h: number): void;
}

简单矩形绘制,矩形描边:

圆形与椭圆

内容填充

可以给绘制的图形填充一些东西,包括颜色,渐变,图案,通过设置 fillStyle 属性来指定填充样式,fillStyle 属性接收的值有三种类型,分别是:string | CanvasGradient | CanvasPattern。填充图形通常的步骤是:设置填充样式 -> 创建路径 -> 调用 fill() 方法填充

  • string 一个 CSS 颜色字符串
  • CanvasGradient 通过 createLinearGradient()createRadialGradient() 方法创建的渐变
  • CanvasPattern 通过 createPattern() 方法创建的模式

线性渐变填充

径向渐变填充

图案填充

阴影效果

设置阴影的属性:

1
2
3
4
5
6
interface CanvasShadowStyles {
shadowBlur: number;
shadowColor: string;
shadowOffsetX: number;
shadowOffsetY: number;
}

贝塞尔曲线

任意多边形

查看评论