当前位置： 首页 > article >正文

【第4章 图像与视频】4.1 图像的绘制

article 2025/9/12 20:46:43

文章目录

  • 前言
  • 在 Canvas 之中绘制图像
  • drawImage() 方法的用法

前言

drawImage() 方法可以将一幅图像的整体或某个部分绘制到 canvas 内的任何位置上，并且允许开发者在绘制过程中对图像进行缩放。也可以将图像绘制在离屏 canvas 中，这样的话就可以对图像进行一些有技巧性地处理了，例如实现图像查看器。

在 Canvas 之中绘制图像

应用程序首先创建了一幅图像，设置了它的数据源，然后等待浏览器加载图片，在图片加载完成后，将其绘制与 canvas 的左上角。

这就是 drawImage() 最简单的用法了。采用这种方式，可以把一整张未经缩放的图形绘制在 canvas 中，该方式的唯一缺点则是你必须等待图像加载完毕后才能对其进行绘制。如果在图像尚未完成加载时就进行绘制，那么根据 Canvas 规范，drawImage() 方法会执行失败，而且没有任何提示。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>4-1-图像的绘制</title><style>body {background: #eeeeee;}#canvas {background: #ffffff;margin-top: 5px;margin-left: 10px;}</style></head><body><canvas id="canvas" width="800" height="600"></canvas><script>const canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),image = new Image()image.src = './waterfall.png'image.onload = () => {context.drawImage(image, 0, 0)}</script></body>
</html>

drawImage() 方法的用法

drawImage() 方法会将一幅图像绘制到一个 canvas之中，所绘的图像叫做“源图像”（source image），而绘制到的地方则叫做“目标canvas”（destination canvas）。这里的image参数可以是 HTMLImageElement 对象、HTMLCanvasElement 对象、HTMLVideoElement 对象。

drawImage() 方法可以接受以下3套参数：

第一种用法，会将整幅图像原样绘制在目标 canvas 中的指定位置上。

drawImage(image, dx, dy)

第二种用法，会将图像完整地绘制到指定的位置上，然而，在绘制时会根据目标区域的宽度与高度进行缩放。

drawImage(image, dx, dy, dWidth, dHeight)

第三种用法，可以将整幅图像或其一部分绘制到目标 canvas 的指定位置上，而且在绘制时会根据目标区域的宽度和高度对图像进行缩放。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

在这里插入图片描述

相关文章：

【第4章 图像与视频】4.1 图像的绘制

文章目录 前言在 Canvas 之中绘制图像drawImage() 方法的用法 前言 drawImage() 方法可以将一幅图像的整体或某个部分绘制到 canvas 内的任何位置上&#xff0c;并且允许开发者在绘制过程中对图像进行缩放。也可以将图像绘制在离屏 canvas 中&#xff0c;这样的话就可以对图像…...

编程日记 2025/9/10 9:30:28

苹果应用开发详细教程（2025最新版）

苹果应用开发详细教程（2025最新版） 第一阶段：开发环境搭建 硬件准备 Mac电脑（macOS Monterey 12或更高版本）iPhone/iPad（真机调试建议iOS 16+）软件安装 # 通过App Store安装Xcode xcode-select --installXcode 15+（包含Swift 5.9编译器）安装CocoaPods（依赖管理工具）…...

编程日记 2025/7/20 13:02:43

G25-05-31Rust开源项目日报 Top10

根据Github Trendings的统计，今日(2025-05-31统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Rust项目10TypeScript项目1Pake: 利用 Rust 轻松构建轻量级多端桌面应用 创建周期：491 天开发语言：Rust协议类型：MIT LicenseStar数量：2095…...

编程日记 2025/9/10 9:31:39

2025年主流编程语言全面分析与学习指南

文章目录 2025年主流编程语言全面分析与学习指南目录简介Python优势局限性学习路径适合人群 JavaScript优势局限性学习路径适合人群 Java优势局限性学习路径适合人群 C优势局限性学习路径适合人群 Rust优势局限性学习路径适合人群 Swift优势局限性学习路径适合人群 Go优势局限性…...

编程日记 2025/7/27 21:09:22

window安装nginx

步骤1&#xff1a;下载Nginx for Windows​ 访问Nginx官网下载页面&#xff1a;https://nginx.org/en/download.html 在​​Stable version​​&#xff08;稳定版&#xff09;下找到Windows版本&#xff0c;点击下载.zip文件&#xff08;如 nginx-1.28.0.zip&#xff09; 步…...

编程日记 2025/9/9 22:19:33

ArcGIS Pro裁剪影像

方法1&#xff1a; 工具箱中&#xff0c;数据管理工具-栅格-栅格处理-裁剪栅格 注意&#xff1a;勾选上使用输入要素裁剪几何 方法2&#xff1a; 按掩膜提取工具裁剪栅格&#xff1a;在工具箱中&#xff0c;Spatial Analyst工具-提取分析-按掩膜提取...

编程日记 2025/9/10 8:31:51

[智能算法]蚁群算法原理与TSP问题示例

目录 ​编辑 一、生物行为启发的智能优化算法 1.1 自然界的群体智能现象 1.2 人工蚁群算法核心思想 二、算法在组合优化中的应用演进 2.1 经典TSP问题建模 2.2 算法流程优化 三、TSP问题实战：Python实现与可视化 3.1 算法核心类设计 3.2 参数敏感性实验 3.3 可视化…...

编程日记 2025/9/10 9:31:37

Vue-4-前端框架Vue基础入门之Vue的常用操作

文章目录 1 VUE1.1 文件结构1.2 定义和显示变量1.2.1 ref函数1.2.2 reactive函数1.3 定义方法1.3.1 方式一1.3.2 方式二1.3.3 方式三1.4 循环遍历1.5 watch1.5.1 监听ref1.5.2 监听reactive1.6 生命周期函数1.7 配置文件2 问题及解决2.1 lack permissions2.2 npm run dev! Miss…...

编程日记 2025/7/7 19:54:20

ubuntu国内镜像源手动配置

备份当前源列表 打开终端&#xff0c;执行以下命令备份当前的源列表&#xff1a; sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup 编辑源列表文件 使用文本编辑器编辑/etc/apt/sources.list文件&#xff0c;例如使用nano&#xff1a; sudo vim /etc/apt/sou…...

编程日记 2025/9/9 1:52:29

21-CS61B-lab6:java文件操作以及持久化一见

文件操作 这里的文件操作主要通过File类&#xff0c;Serializable的派生类等实现 拥有路径path(相对路径/绝对路径)&#xff0c;创建File对象 File newFile new File(path); 获得当前工作目录File File CWD new File(System.getProperty("user.dir")); 通过S…...

编程日记 2025/9/11 23:50:14

⚡️ Linux 系统安装与配置 Git

⚡️ Linux 系统安装与配置 Git &#x1f4d8; 1. Git 简介 Git 是目前世界上最流行的分布式版本控制系统&#xff0c;他能高效地处理从小型到大型项目的版本管理需求&#xff0c;是现代软件开发流程中的核心工具之一。 在企业环境中&#xff0c;大多数公司通常会在 Linux 服…...

编程日记 2025/9/12 2:47:03

SpringBoot 自动装配原理深度解析：从源码到实践

SpringBoot 自动装配原理深度解析&#xff1a;从源码到实践 SpringBoot 作为现代 Java 开发的事实标准&#xff0c;其核心优势之一是 “约定大于配置” 的自动装配机制。本文将从源码层面深入解析 SpringBoot 自动装配的实现原理&#xff0c;并通过代码示例展示其工作流程。 …...

编程日记 2025/8/31 23:25:57

【Go语言】Fyne GUI 库使用指南 (面向有经验开发者)

引言 Fyne 是一个使用 Go 语言编写的、易于使用的跨平台 GUI 工具包和应用程序 API。它旨在通过单一代码库构建在桌面和移动设备上运行的应用程序。本文档面向有一定 Go 语言开发经验的开发者&#xff0c;将详细介绍 Fyne 最新版的核心功能&#xff0c;包括基础组件、布局系统…...

编程日记 2025/9/6 4:23:39

Nginx Lua模块(OpenResty)实战：动态化、智能化你的Nginx，实现复杂Web逻辑 (2025)

更多服务器知识&#xff0c;尽在hostol.com 嘿&#xff0c;各位Nginx的“铁杆粉丝”和“配置大师”们&#xff01;咱们都知道&#xff0c;Nginx以其超凡的性能、稳定性和丰富的模块化功能&#xff0c;在Web服务器、反向代理、负载均衡等领域独步青云&#xff0c;简直是服务器软…...

编程日记 2025/7/16 7:34:05

openssl 怎么生成吊销列表

mkdir test cd test # 根据 /usr/lib/ssl/openssl.cnf 配置文件中目录结构可知有个demoCA目录&#xff0c;目录下有各种文件。 mkdir ./demoCA ./demoCA/newcerts ./demoCA/private sudo chmod 777 -R ./demoCA/ echo 01 > ./demoCA/serial touch ./demoCA/index.txt # /usr…...

编程日记 2025/9/6 4:25:26

Go语言包的组织与导入 -《Go语言实战指南》

在 Go 语言中&#xff0c;包&#xff08;Package&#xff09; 是管理代码模块化、复用性与可维护性的核心单位。本章将讲解如何组织包结构、如何导入其他包、以及项目中的最佳实践。 一、什么是包&#xff1f; • 每个 .go 文件都属于某个包&#xff08;通过 package 声明&…...

编程日记 2025/8/8 11:15:01

springboot-响应接收与ioc容器控制反转、Di依赖注入

1.想将服务器中的数据返回给客户端&#xff0c;需要在controller类上加注解&#xff1a;ResponseBody; 这个注解其实在前面已经使用过&#xff0c;RestController其实就包含两个注解&#xff1a; Controller ResponseBody 返回值如果是实体对象/集合&#xff0c;将会转换为j…...

编程日记 2025/9/10 2:26:11

CSP使用严格设置

文章目录 说明示例 说明 日期&#xff1a;2025年6月2日。 内容安全政策&#xff08;MPS&#xff09;是一个额外的安全层&#xff0c;有助于检测和缓解某些类型的攻击。包括&#xff08;但不限于&#xff09;跨站点脚本&#xff08;XSS&#xff09;和数据注入攻击。这些攻击用…...

编程日记 2025/7/17 19:19:16

Spring代理工厂类ProxyFactory作用以及实现原理

代理工厂类ProxyFactory AdvisedSupport&#xff08;代理配置信息类&#xff09;ProxyFactory&#xff08;代理工厂类&#xff09;小结测试 源码见&#xff1a;mini-spring 在 AOP&#xff08;面向切面编程&#xff09;中&#xff0c;Spring 支持两种常见的代理机制&#xff1a…...

编程日记 2025/9/6 4:21:02

SpringBoot使用MQTT协议简述

在 Spring Boot 中使用 MQTT 协议连接硬件设备&#xff0c;可以通过以下步骤实现。这里以 Eclipse Paho MQTT 客户端为例&#xff1a; 1. 添加 Maven 依赖 <dependencies><!-- Spring Boot Starter --><dependency><groupId>org.springframework.boo…...

编程日记 2025/7/6 3:01:22

【GraphQL】深入解析 Apollo Client：从架构到实践的一站式 GraphQL 解决方案

深入解析 Apollo Client&#xff1a;从架构到实践的一站式 GraphQL 解决方案 1. 引言 GraphQL 作为现代 API 开发的核心技术&#xff0c;其灵活性和高效性正在重塑数据交互模式。Apollo Client 作为 GraphQL 生态中最受欢迎的客户端库&#xff0c;凭借强大的缓存机制、框架集…...

编程日记 2025/7/12 2:35:34

集成电路制造设备防震基座选型指南：为稳定护航-江苏泊苏系统集成有限公司

集成电路制造设备防震基座选型指南&#xff1a;为稳定护航 在集成电路制造这一精密复杂的领域&#xff0c;每一个环节都如同精密仪器中的微小齿轮&#xff0c;一丝偏差都可能导致严重后果。制造设备的稳定运行更是重中之重&#xff0c;而防震基座作为守护设备稳定的第一道防线…...

编程日记 2025/9/10 3:08:03

华为OD机试真题——阿里巴巴找黄金宝箱(II)（2025A卷：100分）Java/python/JavaScript/C/C++/GO最佳实现

2025 A卷 100分 题型 本专栏内全部题目均提供Java、python、JavaScript、C、C++、GO六种语言的最佳实现方式； 并且每种语言均涵盖详细的问题分析、解题思路、代码实现、代码详解、3个测试用例以及综合分析； 本文收录于专栏：《2025华为OD真题目录+全流程解析+备考攻略+经验分…...

编程日记 2025/9/11 6:39:25

Vue中 toRaw 和 markRaw 的使用

背景 针对一些特殊的需求&#xff0c;在项目里&#xff0c;需要将响应式数据变为普通原始类型数据&#xff0c;这种情况是有的 在 Vue 中&#xff0c;能够将普通数据类型的数据变为响应式数据&#xff0c;也能将响应式类型数据变为普通类型数据&#xff0c;用于提升数据的性能…...

编程日记 2025/7/7 5:24:41

探索DeepSeek提示词：关键策略与实用场景

在人工智能飞速发展的时代&#xff0c;DeepSeek作为一款备受关注的AI工具&#xff0c;其强大的功能为用户提供了高效便捷的服务。然而&#xff0c;要充分发挥DeepSeek的潜力&#xff0c;掌握提示词的使用策略至关重要。本文将深入探讨DeepSeek提示词的关键策略&#xff0c;并结…...

编程日记 2025/9/11 2:50:45

海底三维可视化平台

1. 摘要 本文作者为视觉分析构建了一个真实海底的“虚拟世界”。在3D环境中导入底部轮廓。在该模型中&#xff0c;通过地震反射获得的海床地层剖面被数字化为离散点&#xff0c;并用克里金算法进行插值&#xff0c;以在每个地层中产生均匀的网格。然后在每一层构建 Delaunay三…...

编程日记 2025/9/11 0:14:37

Elasticsearch 读写流程深度解析

在数据驱动的数字化浪潮中&#xff0c;Elasticsearch 凭借其毫秒级搜索响应与水平扩展能力&#xff0c;已成为现代数据架构的核心引擎。本文将深入剖析其读写流程的设计思想、实现细节与工程权衡&#xff0c;揭示这一分布式系统的精妙架构。 一、 架构基石&#xff1a;分布式设…...

编程日记 2025/9/12 6:26:20

AIoT赋能场馆数字化转型：智能管理新生态

在数字化浪潮席卷全球的当下&#xff0c;传统场馆管理模式已难以满足日益增长的高效运营与精细化服务需求。智慧场馆建设成为行业发展的必然趋势&#xff0c;而AIoT&#xff08;人工智能物联网&#xff09;技术的深度应用&#xff0c;为多系统集成提供了全新的解决方案&#xf…...

编程日记 2025/9/6 4:23:43

1、Pytorch介绍与安装

1、Pytorch介绍 PyTorch 是由 Facebook AI Research (FAIR) 团队开发并维护的一款开源深度学习框架&#xff0c;于 2016 年首次发布。它因其直观的设计、卓越的灵活性以及强大的动态计算图功能&#xff0c;迅速在学术界和工业界获得了广泛认可&#xff0c;成为当前深度学习研究…...

编程日记 2025/9/10 23:31:10

【从零开始学习QT】Qt 概述

目录 一、什么是 Qt 1.1 简介 1.2 Qt 的发展史 1.3 Qt 支持的平台 1.5 Qt 的优点 1.6 Qt 的应用场景 二、搭建 Qt 开发环境 2.1 Qt SDK 的下载 2.2 Qt SDK 的安装 2.3 验证 Qt SDK 安装是否成功 2.4 Qt 环境变量配置 三、认识 Qt Creator 3.1 Qt Creator 概览 3.…...

编程日记 2025/9/6 4:25:08