CHANSHIYU
GITHUBZERO
  • README
  • 時雨
    • 2017
      • 01 网站动态标题的两种方式
      • 02 RN App 外部唤醒踩坑记
    • 2018
      • 01 不一样の烟火
      • 02 Python 之禅
      • 03 Python 文件操作
    • 2019
      • 01 Aurora 食用指南
      • 02 Godaddy 域名找回记事
      • 03 一个接口的诞生
      • 04 SpringMVC 前后端传参协调
      • 05 主题集成友链访问统计
      • 06 Github Style 博客主题
      • 07 字符编码の小常识
      • 08 WSL 安装 Docker 实录
      • 09 Eriri comic reader
      • 10 Aurora 2.0
      • 11 jsDelivr 全站托管
      • 12 两年工作台变迁史
      • 13 春物
      • 14 一种优雅の笔记方式
    • 2020
      • 01 Telegram 电报机器人
      • 02 她的眼里有星辰
      • 03 文心雕龙
      • 04 软萌木子の有趣笔谈
      • 05 Telegram RSS 订阅频道
      • 06 水月雨银色飞船
      • 07 五年前旧照
    • 2021
      • 01 春宵苦短 2020
      • 02 风花
    • 2022
      • 01 小城新貌
      • 02 原神满级纪念
    • 2023
      • 01 2022 逆旅
      • 02 半透明背景图实现
      • 03 新年攒台海景房
  • 前端
    • JavaScript
      • 01 JavaScript 秘密花园
      • 02 JavaScript 正则技巧
      • 03 从浏览器解析 JS 运行机制
      • 04 Canvas 基础用法
      • 05 Blob Url And Data Url
      • 06 函数节流与函数防抖
      • 07 排序算法初探
      • 08 洗牌算法实现数组乱序
      • 09 正则匹配 match 和 exec
      • 10 正则匹配汉字
      • 11 JSX.Element vs ReactElement
      • 12 可选链与空值合并
      • 13 TypeScript 编码规范
      • 14 Typescript 中 interface 和 type 区别
      • 15 TypeScript 高级类型
      • 16 TypeScript 关键字
      • 17 TypeScript 映射类型
    • CSS
      • 01 Flex 弹性布局
      • 02 Position 定位
      • 03 CSS 逻辑属性
    • Node
      • 01 Node Tips
      • 02 七天学会 NodeJS
    • Note
      • 01 Note
      • 02 Code
      • 03 Snippets
      • 04 Git
    • React
      • 01 React Props Children 传值
      • 02 Use a Render Prop!
      • 03 React Hook
      • 04 React Hook 定时器
      • 05 Fetch data with React Hooks
      • 06 React 和 Vue 中 key 的作用
      • 07 useCallback 的正确使用方式
      • 08 useLayoutEffect 和 useEffect 的区别
      • 09 forwardRef 逃生舱
      • 10 React 条件渲染
    • Vue
      • 01 Vue Tips
      • 02 Vue 构建项目写入配置文件
      • 03 Vue 项目引入 SVG 图标
      • 04 Vue 一键导出 PDF
      • 05 动态可响应对象
      • 06 Vue 引入 SCSS
      • 07 Vue 路由权限控制
    • 实战系列
      • 01 WebSocket 心跳重连机制
      • 02 图片加解密二三事
      • 03 优雅实现 BackTop
      • 04 动态加载 JS 文件
      • 05 常用 DOM 方法比较
      • 06 AbortController 中断 fetch
      • 07 计算字符所占字节数
      • 08 Axios 自定义返回值类型
  • 后端
    • Java
      • 01 面向对象基本特征与原则
      • 02 Java 数据类型
      • 03 Java String
      • 04 Java 只有值传递
      • 05 Java final 与 static
      • 06 Java Object 通用方法
      • 07 Java 继承
      • 08 Java 反射
      • 09 Java 异常
      • 10 Java 容器
      • 11 Java 虚拟机
      • 12 Java IO
      • 13 Java HashMap
      • 14 Java List
      • 15 Java Stream
      • 16 Java 枚举
      • 17 Java 日期与时间
      • 18 Java fail fast
      • 19 Java BiFunction 和 BinaryOperator
    • 并发编程
      • 01 Java 并发
      • 02 synchronized
      • 03 volatile
      • 04 ReentrantLock
      • 05 ReadWriteLock
      • 06 StampedLock
      • 07 CompletableFuture
      • 08 ForkJoin
      • 09 ThreadLocal
      • 10 CountDownLatch
      • 11 ThreadPoolExecutor
      • 12 ExecutorService
      • 13 Atom 原子类
      • 14 BlockingQueue
    • 高效编程
      • 01 30 seconds of java8
      • 02 函数式替代 for 循环
      • 03 Java 字符串拼接
      • 04 单例模式的几种实现
      • 05 HashMap 排序
    • 理论概念
      • 01 Java Servlet
      • 02 Java 服务端分层模型
      • 03 经典排序算法
      • 04 LRU 缓存淘汰算法
      • 05 BloomFilter 判断元素存在
      • 06 Java HashMap 面试大全
      • 07 HTTP 状态码详解
      • 08 Cookie 和 Session
      • 09 基于消息队列的分布式事务解决方案
      • 10 微服务之所见
    • 实战系列
      • 01 AES CBC 加解密
      • 02 Magic 魔数获取文件类型
      • 03 获取请求 IP 地址
      • 04 Kaptcha 与数学公式验证码
      • 05 Netty 获取客户端 IP.md
      • 06 高性能无锁队列 Disruptor.md
      • 07 前后端接入阿里云盾
    • Linux
      • 01 Linux 文件权限系统
      • 02 Linux 常用软件安装
      • 03 CentOS 防火墙
    • MySQL
      • 01 MySQL
      • 02 SQL 语句 where 1=1
      • 03 truncate 和 delete
      • 04 事务
      • 05 关系模型
      • 06 Mybatis
      • 07 MySQL 查看数据库表详情
    • Nginx
      • 01 Nginx 指北
      • 02 nginx gzip 压缩
    • Note
      • 01 Vagrant
      • 02 Docker
      • 03 Lombok
      • 04 Swagger
      • 05 Redis
    • Spring
      • 01 Spring Boot
      • 02 Spring Validation
      • 03 Spring Data
      • 04 Spring 容器
      • 05 Spring AOP
      • 06 Spring Transactional 注解
      • 07 Spring Cloud Netflix
      • 08 Spring Cloud Alibaba
      • 09 Spring Security oAuth2
      • 10 Spring Boot 跨域解决方式
      • 11 Spring Boot 请求拦截
      • 12 Spring Boot 异步编程
      • 13 Spring Boot 定时任务
      • 14 Spring Boot 管理 bean
      • 15 Mybatis 逆向代码生成
      • 16 JWT
      • 17 JPA
      • 18 Apache Shiro
      • 19 Spring 异步请求
  • 书斋
    • ES6 标准入门
      • 01 变量声明与解构赋值
      • 02 语法的扩展
      • 03 数据类型与数据结构
      • 04 Proxy 和 Reflect
      • 05 异步编程 Promise
      • 06 Iterator 和 for of 循环
      • 07 Generator 函数
      • 08 Async 函数
      • 09 Class 类
    • JavaScript 设计模式
      • 01 基础知识
      • 02 设计模式(上)
      • 03 设计模式(下)
      • 04 设计原则和编程技巧
  • 纸函
    • 01 Interview
    • 02 Ceph
    • 03 动态规划
    • 04 Document.designMode
    • 2023-01-10
  • 万藏
    • 文档
      • 01 Git 文档
      • 02 Linux 命令大全
      • 03 七天学会 NodeJS
      • 04 Algorithms
    • 工具
      • 01 Nginx Config
      • 02 ProcessOn
      • 03 Flat Icon
      • 04 Regexper
      • 05 TempMail
      • 06 Carbon
由 GitBook 提供支持
在本页
  • 基础用法
  • 属性介绍
  • 渲染上下文
  • 绘制图形
  • 贝塞尔曲线
  • Path2D

这有帮助吗?

  1. 前端
  2. JavaScript

04 Canvas 基础用法

基础用法

属性介绍

<canvas> 标签只有两个可选的属性 width 和 height。当没有设置宽度和高度的时候,canvas 会初始化宽度为 300 像素和高度为 150 像素。宽高属性会自动忽略单位,以像素展示,所以使用 em 或 rem 等单位无效。

在视觉表现上,CSS 的宽高属性权重要高于 <canvas> 标签的宽高权重。可以将 <canvas> 看作 <img> 元素,主要区别是 <canvas> 的等比例特性是强制的,会忽略 HTML 属性的设置,但 <img> 不会。

<img src="1.jpg" width="300" height="150" style="height:100px;" />
<canvas width="300" height="150" style="height:100px;"></canvas>

如上代码所示,此时 <img> 宽度不会随高度缩放,最终以 300x100 尺寸显示,而 <canvas> 宽度会按高度等比例缩放,以 200x100 尺寸显示。

需要注意:在使用 Canvas API 绘制图像时,是以 HTML 的宽高属性为原点,与 CSS 属性无关。

可以在 <canvas> 标签中提供替换内容。不支持的浏览器将会忽略容器并在其中渲染后备内容。

<canvas width="150" height="150">
  你的浏览器不支持 canvas,请升级你的浏览器
</canvas>

渲染上下文

<canvas> 标签创建画布,并公开渲染上下文(The rendering context),用来绘制内容。使用方法 getContext() 可以获取渲染上下文对象,该方法接受一个参数表示上下文格式,一般传入 2d,当然还有 3d 模式,这里不细谈。

const canvas = document.getElementById("yoo")
const ctx = canvas.getContext("2d")

绘制图形

绘制矩形

原生 canvas 只支持一种图形绘制:矩形。所有其他的图形的绘制都至少需要生成一条路径。canvas 提供了三种方法绘制矩形:

  • fillRect(x, y, width, height): 绘制一个填充矩形

  • strokeRect(x, y, width, height): 绘制一个矩形边框

  • clearRect(x, y, width, height): 清除指定矩形区域,使之变透明

三种方式示例如下:

ctx.fillStyle = "#fb618d"
ctx.fillRect(50, 50, 200, 200)
ctx.clearRect(70, 70, 160, 160)
ctx.strokeRect(90, 90, 120, 120)

绘制路径

图形的基本元素是路径,使用路径绘制图形的步骤如下:

  1. 创建路径起始点

  2. 画出路径

  3. 将路径封闭

  4. 描边或填充路径区域

整个步骤需要使用一下函数:

  1. beginPath():新建一条新路径

  2. closePath():闭合路径

  3. stroke():通过线条来绘制图形轮廓

  4. fill():通过填充路径的内容区域生成实心图形

  5. moveTo(x, y):移动笔触到指定坐标

  6. lineTo(x, y):绘制一条从当前位置到指定坐标的直线

  7. arc(x, y, radius, startAngle, endAngle, anticlockwise):绘制圆弧,anticlockwise 为 true 时逆时针,默认为顺时针。

当 canvas 初始化或者 beginPath() 调用后,通常会使用 moveTo() 函数设置起点。或者使用该方法绘制不连续的路径。

示例 1:绘制三角形

// 填充三角形
ctx.beginPath()
ctx.moveTo(40, 40)
ctx.lineTo(220, 40)
ctx.lineTo(40, 220)
ctx.fill()

// 描边三角形
ctx.beginPath()
ctx.moveTo(260, 260)
ctx.lineTo(260, 80)
ctx.lineTo(80, 260)
ctx.closePath()
ctx.stroke()

注意到填充三角形和描边三角形有些不同,当路径使用填充 fill() 时会自动闭合,而使用描边 stroke() 时则不会闭合路径,所以需要调用 closePath() 方法。

示例 2:绘制笑脸

ctx.beginPath()
ctx.moveTo(260, 150)
ctx.arc(150, 150, 110, 0, Math.PI * 2, true) // 脸
ctx.moveTo(220, 150)
ctx.arc(150, 150, 70, 0, Math.PI, false) // 嘴
ctx.moveTo(120, 110)
ctx.arc(110, 110, 10, 0, Math.PI * 2, false) // 左眼
ctx.moveTo(200, 110)
ctx.arc(190, 110, 10, 0, Math.PI * 2, false) // 右眼
ctx.stroke()

贝塞尔曲线

canvas 里使用二次贝塞尔曲线和三次贝塞尔曲线可以用来绘制复杂的图形。

canvas API quadraticCurveTo(cp1x, cp1y, x, y),用来绘制二次贝塞尔曲线,cp1x,cp1y 为控制点,x,y 为结束点。

canvas API bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y),用来绘制三次贝塞尔曲线,cp1x,cp1y 为控制点一,cp2x,cp2y 为控制点二,x,y 为结束点。

关于贝塞尔曲线的使用,这里不再细研究~~(看得头痛)~~,下次如有机会再说。

Path2D

之前所介绍的 canvas API 都是使用路径和绘画命令来把对象“画”在画布上,不能复用命令。较新的浏览器支持 Path2D 对象,用来缓存或记录绘画命令,这样可以复用路径,简化代码和优化性能。

Path2D() 会返回一个新初始化的 Path2D 对象,可能将某一个路径作为变量——创建一个它的副本,或者将一个包含 SVG path 数据的字符串作为变量。

new Path2D() // 空的Path对象
new Path2D(path) // 克隆Path对象
new Path2D("M10 10 h 80 v 80 h -80 Z") // 从SVG建立Path对象

之前介绍的所有 canvas API 都可以在生成的 Path2D 对象上使用。

const rectangle = new Path2D()
rectangle.rect(10, 10, 50, 50)

const circle = new Path2D()
circle.moveTo(125, 35)
circle.arc(100, 35, 25, 0, 2 * Math.PI)

ctx.stroke(rectangle)
ctx.fill(circle)
上一页03 从浏览器解析 JS 运行机制下一页05 Blob Url And Data Url

最后更新于1年前

这有帮助吗?

三种方式绘制矩形
绘制三角形
笑脸
二次贝塞尔曲线
三次贝塞尔曲线