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

HTML5之drawImage函数

news 2026/3/29 9:07:51

参数说明：
drawImage(image, x, y) //按原图片大小绘制。
drawImage(image, x, y, width, height) //按指定大小绘制。
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight) //常用于图片裁剪。

其中：
image:所要绘制的图像。这必须是表示 标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。
x和y：图片在文档中的坐标位置。
width和height：图片的宽高。
对于drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight) 常用有图片的裁剪。其参数含义如下：
在原来image上从某一个位置开始(sourceX,sourceY)，指定长宽进行剪切(sourceX,sourceY),然后将剪切的内容放到位置为(destX,destY),宽度为(destWidth),高度为(destHeight)的位置上，当然裁剪后的会覆盖原来的图片。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>drawImage</title>
</head>
<body><canvas id="myCanvas" width="1800" height="1000"></canvas><script type="text/javascript">var canv=document.getElementById("myCanvas");var ctx = canv.getContext("2d");img = new Image();img.src = "./dy.jpg";//当图片加载完毕的时候在drawImage,否则可能图片还没有加载完毕//当然画不上去喽，这就和浏览器的性能有关了。img.onload=function(){ctx.drawImage(img,0,0,1800,1000,0,0,500,400);}</script>
</body>
</html>

相当于缩小了，原图像素实际上是1920*1080
在这里插入图片描述

相关文章：

HTML5之drawImage函数

参数说明&#xff1a; drawImage(image, x, y) //按原图片大小绘制。 drawImage(image, x, y, width, height) //按指定大小绘制。 drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) //常用于图片裁剪。 其中&#xff1a…...

编程日记 2023/9/4 9:28:34

leetcode7.整数反转-Java

题目 给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [−231, 231 − 1] &#xff0c;就返回 0。 假设环境不允许存储 64 位整数&#xff08;有符号或无符号&#xff09;。 7. 整数反转 - 力扣&a…...

编程日记 2023/9/4 9:27:33

操作系统备考学习 day2 （1.3.2 - 1.6）

操作系统备考学习 day2 计算机系统概述操作系统运行环境中断和异常的概念系统调用 操作系统体系结构操作系统引导虚拟机 计算机系统概述 操作系统运行环境 中断和异常的概念 中断的作用 CPU上会运行两种程序&#xff0c;一种是操作系统内核程序&#xff0c;一种是应用程序。…...

编程日记 2023/9/4 9:26:32

Django-跨域

一、基础概念 cors 跨域资源共享 二、跨域请求-简单请求 满足以下全部条件的请求为 简单请求 1.请求方法如下&#xff1a; GET or HEAR or POS 2.请求头仅包含如下&#xff1a; Accept、Accept-Language、Content-Language、Content-Type 3.ConTent-Type 仅支持如下三种&…...

编程日记 2023/9/4 9:25:28

wireshark抓包体验

目录 1、使用基础 1.1 数据包筛选 1.2 MAC地址筛选 1.3 端口筛选 1.4 协议筛选 1.5 包长度筛选 1.6 http请求筛选 2.数据包搜索 3.数据包还原 2、例题复现 1、使用基础 1.1 数据包筛选 ip.src 源ip地址 同理可以得到筛选目标地址&#xff1a; ip.dst 目的ip地址 1.2 …...

编程日记 2023/9/4 9:24:27

Prometheus+grafana安装配置

Prometheus安装配置 Prometheus下载地址 官方地址&#xff1a;Download | Prometheus 可根据系统版本下载想要的安装包&#xff0c;复制链接地址 wget https://github.com/prometheus/prometheus/releases/download/v2.33.3/prometheus-2.33.3.linux-amd64.tar.gzwg 解压pr…...

编程日记 2023/9/4 9:23:26

长连接和短连接有什么区别？

长连接和短连接是什么&#xff1f; HTTP的长连接和短连接本质上是TCP长连接和短连接。HTTP属于应用层协议&#xff0c;在传输层使用TCP协议&#xff0c;在网络层使用IP协议。 IP协议主要解决网络路由和寻址问题&#xff0c;TCP协议主要解决如何在IP层之上可靠地传递数据包&…...

编程日记 2023/9/4 9:22:25

Qt应用开发(基础篇)——输入对话框 QInputDialog

一、前言 QInputDialog类继承于QDialog&#xff0c;是一个简单方便的对话框&#xff0c;用于从用户获取单个值。 对话框窗口 QDialog QInputDialog输入对话框带有一个文本标签、一个输入框和标准按钮。输入内容可以字符、数字和选项&#xff0c;文本标签用来告诉用户应该要输入…...

编程日记 2023/9/4 9:21:24

C++ struct 笔记（超级详细）

今日碎碎念&#xff1a;我在学C语言时经常用到结构体struct&#xff0c;之后在写C程序时遇到在struct中定义构造函数和成员函数的情况&#xff0c;这在c语言中是从未遇到过的&#xff0c;觉得奇怪&#xff0c;想到之前并没有真正系统学习C里的struct&#xff0c;有必要今天详细…...

编程日记 2023/9/4 9:20:22

Vue基础1：生命周期汇总（vue2）

Description 生命周期图&#xff1a; 可以理解vue生命周期就是指vue实例从创建到销毁的过程&#xff0c;在vue中分为9个阶段&#xff1a;创建前/后&#xff0c;载入前/后&#xff0c;更新前/后&#xff0c;销毁前/后&#xff0c;其他&#xff1b;常用的有&#xff1a;created&…...

编程日记 2023/9/4 9:19:18

Linux串口驱动

《I.MX6ULL 参考手册》第 3561 页的“Chapter 55 Universal Asynchronous Receiver/Transmitter(UART) I.MX6ULL串口原理 1.1UART与USART UART是异步通信&#xff0c;USART是异步/同步通信&#xff0c;比UART多了一条时钟线 USART 的全称是 Universal Synchronous/Asynchr…...

编程日记 2023/9/4 9:18:16

java反编译工具jd-gui使用

文章目录 一、JD-GUI介绍二、下载三、安装四、使用教程五、免责声明摘抄 一、JD-GUI介绍 JD-GUI是一个独立的图形实用程序&#xff0c;显示“.class”文件的Java源代码。 使用JD-GUI浏览重构的源代码&#xff0c;以便即时访问方法和字段。 二、下载 MAC安装包&#xff1a;ht…...

编程日记 2023/9/4 9:17:15

Linux 之 shell 脚本

Linux 之 shell 脚本 1、脚本的格式要求2、shell 脚本常用执行方式2.1、绝对路径或相对路径方式2.2、sh脚本方式&#xff08;不推荐&#xff09; 3、shell 的变量3.1、定义 shell 变量3.2、将命令返回值赋值给变量 &#xff08;重点&#xff09;3.3、设置环境变量3.4、位置参数…...

编程日记 2023/9/4 9:15:58

如何去阅读开源的第三方库的源码

2023年9月2日&#xff0c;周六晚上 今天探索了一天如何去阅读第三方库的源码&#xff0c;终有所获。 再结合以前看cereal项目的源码的经验&#xff0c;于是就有了这篇博客。 我个人认为&#xff1a; 在阅读一个开源的第三方库之前&#xff0c;要先学会这个第三方库的一些简单…...

编程日记 2023/9/4 9:14:57

浅析Linux虚拟网络技术

文章目录 概述Tap/tun设备tun/tap的工作机制 Bridge网桥Bridge的工作机制Bridge IP 相关参考 概述 在传统的网络环境中&#xff0c;一台物理主机包含一张或多张网卡&#xff0c;要实现与其它物理主机之间的通信&#xff0c;需要将自身的网卡通过路由器或者交换机连接到外部的物…...

编程日记 2023/9/4 9:13:56

设计模式之九：迭代器与组合模式

有许多方法可以把对象堆起来成为一个集合&#xff08;Collection&#xff09;&#xff0c;比如放入数组、堆栈或散列表中。若用户直接从这些数据结构中取出对象&#xff0c;则需要知道具体是存在什么数据结构中&#xff08;如栈就用peek&#xff0c;数组[]&#xff09;。迭代器…...

编程日记 2023/9/4 9:12:55

官方推荐:6种Pandas读取Excel的方法

Pandas提供了多种读取Excel文件的方法&#xff0c;以下是官方推荐的6种方法&#xff1a; 1. 使用pd.read_excel()函数 这是最常用的方法&#xff0c;可以读取Excel文件&#xff0c;并将其转换为Pandas数据框。可以指定工作表名和列名的行号。 df pd.read_excel(data.xlsx, …...

编程日记 2023/9/4 9:11:54

Redis与Mysql区别

一、关系型数据库 mysql&#xff0c;pgsql,oracle ,sqlserver 支持连表关联查询&#xff08;会有一些特定的语法特特性&#xff09; 二、非关系型数据库 redis,mongodb,memcache &#xff08;key-value&#xff09; 三、关系型数据库与非关系型数据库的区别&#xff1a; 1&am…...

编程日记 2023/9/4 9:10:52

Black-Box Tuning for Language-Model-as-a-Service

本文是LLM系列的文章&#xff0c;针对《Black-Box Tuning for Language-Model-as-a-Service》的翻译。 语义模型即服务的黑盒调整 摘要1 引言2 背景3 方法4 实验5 讨论与未来工作 摘要 GPT-3等超大的预训练语言模型&#xff08;PTM&#xff09;通常作为服务发布。它允许用户设…...

编程日记 2023/9/4 9:09:51

通用的ARM64架构镜像

#此链接包含x86架构和ARM架构的pytorch镜像&#xff0c;镜像里面已下载好各种第三方库&#xff0c;GPU版本的pytorch可用。缺点&#xff1a;镜像有点大 测试环境&#xff1a;操作系统麒麟银河V10&#xff0c;ARM64处理器&#xff08;cpu&#xff09;&#xff0c;显卡为T4显卡 …...

编程日记 2023/9/4 9:08:50

YOLOv8损失函数魔改实战：5步搞定MPDIoU集成，附metrics.py与loss.py完整修改代码

YOLOv8损失函数魔改实战&#xff1a;5步搞定MPDIoU集成&#xff0c;附metrics.py与loss.py完整修改代码 目标检测模型的性能优化往往从损失函数入手。MPDIoU作为新一代边界框回归损失函数&#xff0c;通过同时考虑两个对角点距离&#xff0c;有效解决了传统IoU系列损失在相同宽…...

编程新知 2026/3/29 6:57:18

Flink 1.11.2 + ClickHouse实战：手把手教你搭建实时商品浏览看板（附Tableau自动刷新技巧）

Flink ClickHouse 实时商品热度分析系统&#xff1a;从数据管道到自动刷新看板的完整实践 电商运营团队每天最关心的问题之一&#xff0c;就是哪些商品正在被用户频繁浏览。这些实时数据如果能快速转化为可视化的热力图&#xff0c;就能帮助运营人员及时调整推荐策略、优化库存…...

编程新知 2026/3/29 6:28:26

智慧电子元器件识别 电子废弃物场景下的物料分类与元器件识别 元器件分拣数据集 电子废弃物自动分拣 电容数据集 保险丝数据集 第10617期

电子废弃物分类与元器件检测数据集 README 项目概述 本数据集专注于电子废弃物场景下的物料分类与元器件识别任务&#xff0c;为固废资源化利用、智能拆解及环保检测领域提供高质量标注数据&#xff0c;助力电子废弃物的高效回收与无害化处理。核心数据信息维度内容数据类别共1…...

编程新知 2026/3/29 3:00:18

基于Session管理的在线视频学习平台防作弊策略

1. Session管理在在线学习平台中的核心作用 在线视频学习平台最头疼的问题之一&#xff0c;就是如何防止用户通过多设备同时登录来刷学习进度。想象一下&#xff0c;如果用户同时在手机、平板和电脑上登录同一个账号&#xff0c;三倍速刷完课程&#xff0c;这对其他认真学习的用…...

编程新知 2026/3/29 1:57:45

为什么你需要ZXPInstaller？3分钟搞定Adobe扩展安装难题

为什么你需要ZXPInstaller&#xff1f;3分钟搞定Adobe扩展安装难题 【免费下载链接】ZXPInstaller Open Source ZXP Installer for Adobe Extensions 项目地址: https://gitcode.com/gh_mirrors/zx/ZXPInstaller 还在为Adobe扩展插件安装而烦恼吗&#xff1f;每次看到.z…...

编程新知 2026/3/29 1:31:24

学术研究助手：OpenClaw+Qwen3.5-9B自动化文献综述

学术研究助手&#xff1a;OpenClawQwen3.5-9B自动化文献综述 1. 为什么需要自动化文献综述工具 作为经常需要阅读大量文献的科研人员&#xff0c;我深刻体会到手动整理文献的痛点。每次开题或写综述时&#xff0c;面对上百篇PDF论文&#xff0c;光是下载、分类、提取关键信息…...

编程新知 2026/3/29 1:01:16

FullCalendar自定义按钮实战：next/prev月份切换回调的优雅实现

1. 为什么需要自定义FullCalendar导航按钮 FullCalendar作为一款功能强大的日历组件&#xff0c;默认提供了prev/next按钮用于月份切换。但在实际项目中&#xff0c;我们经常遇到这样的需求&#xff1a;当用户点击切换月份按钮时&#xff0c;需要执行一些额外的逻辑操作。比如&…...

编程新知 2026/3/29 0:51:14

OpenClaw安全实践：GLM-4.7-Flash模型权限控制与操作审计

OpenClaw安全实践&#xff1a;GLM-4.7-Flash模型权限控制与操作审计 1. 为什么需要关注OpenClaw的安全配置 去年冬天的一个深夜&#xff0c;我的个人笔记库突然出现了大量异常文件操作记录。当时我正在测试OpenClaw的自动化归档功能&#xff0c;由于没有正确配置权限边界&…...

编程新知 2026/3/29 0:35:10

Gear-Lib系统抽象层揭秘：POSIX适配与硬件抽象设计思想

Gear-Lib系统抽象层揭秘&#xff1a;POSIX适配与硬件抽象设计思想 【免费下载链接】gear-lib Gear-Lib, C library for IOT Embedded Multimedia and Network 项目地址: https://gitcode.com/gh_mirrors/ge/gear-lib Gear-Lib作为面向物联网嵌入式多媒体与网络的C语言库…...

编程新知 2026/3/28 22:36:14

从标准到实战：网络变压器在POE应用中的AF/AT/BF/BT详解与电路设计指南

1. 网络变压器在POE系统中的核心作用 第一次接触POE供电系统时&#xff0c;我对着电路板上那个带铁壳的方形元件研究了半天——这就是网络变压器。它看起来平平无奇&#xff0c;却是整个POE系统的"心脏"。简单来说&#xff0c;网络变压器在POE系统中要同时干两件事&a…...

编程新知 2026/3/28 21:53:59