45-使用scale實現圖形縮放

45-使用scale實現圖形縮放_嗶哩嗶哩_bilibili45-使用scale實現圖形縮放是一次性學會 Canvas?動畫繪圖(核心精講+50個案例)2023最新教程的第46集視頻,該合集共計53集,視頻收藏或關注UP主,及時了解更多相關視頻內容。https://www.bilibili.com/video/BV16T411B7kP?spm_id_from=333.788.videopod.episodes&vd_source=9218320e7bcc2e793fa8493559f4acd7&p=46

先使用縮放 .scale() ,再填充內容 ,fillRect() ,關鍵句:

context.scale(1.3, 1);
context.fillStyle = "red";
context.fillRect(0, 0, 100, 100); // 紅色矩形,橫向拉伸 1.3 倍

因為沒有清空畫布,所以最后小綠色正方形會覆在第二個藍色正方形上面,效果圖:

【完整代碼】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>canvas {background-color: #ccc;display: block;margin: auto;}</style>
</head><body>
</body>
<script>const canvas = document.createElement('canvas');canvas.width = 600;canvas.height = 400;document.body.append(canvas);const context = canvas.getContext('2d');// canvas的位移api// 所有的位置變換都是基于原點的變化(左上角)// 在0,0初始位置繪制方形,之后它會根據translate進行100,100的偏移// context.translate(100, 100)// 縮放context.scale(1, 1)context.fillRect(0, 0, 100, 100)// 第一個 timeout(2000ms)setTimeout(function () {context.save();context.scale(1.3, 1);context.fillStyle = "red";context.fillRect(0, 0, 100, 100); // 紅色矩形,橫向拉伸 1.3 倍context.restore();}, 2000);// 第二個 timeout(3000ms)setTimeout(function () {context.save();context.scale(1.3, 1.5);context.fillStyle = "blue";context.fillRect(0, 0, 100, 100); // 藍色矩形,橫向 1.3 倍,縱向 1.5 倍context.restore();}, 3000);// 第三個 timeout(4000ms)setTimeout(function () {context.save();context.scale(0.5, 0.5);context.fillStyle = "green";context.fillRect(0, 0, 100, 100); // 綠色矩形,縮小到 10x10 像素context.restore();}, 4000);
</script></html>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/87680.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/87680.shtml
英文地址,請注明出處:http://en.pswp.cn/web/87680.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

軟件開發早期階段,使用存儲過程的優勢探討:敏捷開發下的利器

在現代軟件開發中&#xff0c;隨著持續集成與敏捷開發的深入推進&#xff0c;開發團隊越來越重視快速響應需求變更、快速上線迭代。在這種背景下&#xff0c;傳統將業務邏輯全部放在應用層的方式在某些階段顯得笨重。本文將探討在軟件開發初期&#xff0c;特別是在需求尚不穩定…

『 C++入門到放棄 』- string

C 學習筆記 - string 一、什麼是string ? string 是 C 中標準函數庫中的一個類&#xff0c;其包含在 中 該類封裝了C語言中字符串操作&#xff0c;提供內存管理自動化與更多的操作 支持複製、比較、插入、刪除、查找等功能 二、常用接口整理 類別常用方法 / 說明建立與指…

ARM架構下C++程序堆溢出與棧堆碰撞問題深度解析

ARM架構下C程序堆溢出與棧堆碰撞問題深度解析 一、問題背景&#xff1a;從崩潰現象到內存異常 在嵌入式系統開發中&#xff0c;程序崩潰是常見但棘手的問題。特別是在ARM架構設備上&#xff0c;一種典型的崩潰場景如下&#xff1a;程序在執行聚類算法或大規模數據處理時突然終…

.NET9 實現排序算法(MergeSortTest 和 QuickSortTest)性能測試

在 .NET 9 平臺下&#xff0c;我們對兩種經典的排序算法 MergeSortTest&#xff08;歸并排序&#xff09;和 QuickSortTest&#xff08;快速排序&#xff09;進行了性能基準測試&#xff08;Benchmark&#xff09;&#xff0c;以評估它們在不同數據規模下的執行效率、內存分配及…

RabbitMQ - SpringAMQP及Work模型

一、概述RabbitMQ是一個流行的開源消息代理&#xff0c;支持多種消息傳遞協議。它通常用于實現異步通信、解耦系統組件和分布式任務處理。Spring AMQP是Spring框架下的一個子項目&#xff0c;提供了對RabbitMQ的便捷訪問和操作。本文將詳細介紹RabbitMQ的工作模型&#xff08;W…

微信小程序51~60

1.界面交互-loading提示框 loading提示框用于增加用戶體驗&#xff0c; 對應的API有兩個&#xff1a; wx.showLoading()顯示loading提示框wx.hideLoading()關閉loading提示框 Page({getData () {//顯示loading提示框wx.showLoading({//提示內容不會自動換行&#xff0c;多出來的…

SqueezeBERT:計算機視覺能為自然語言處理在高效神經網絡方面帶來哪些啟示?

摘要 人類每天閱讀和撰寫數千億條消息。得益于大規模數據集、高性能計算系統和更優的神經網絡模型&#xff0c;自然語言處理&#xff08;NLP&#xff09;技術在理解、校對和組織這些消息方面取得了顯著進展。因此&#xff0c;將 NLP 部署于各類應用中&#xff0c;以幫助網頁用…

Springboot開發常見注解一覽

注解用法常用參數Configuration用于標記類為配置類&#xff0c;其中通過Bean方法定義Spring管理的組件。它替代XML配置&#xff0c;用Java代碼聲明對象創建邏輯&#xff0c;并確保單例等容器特性生效。相當于給Spring提供一個“制造說明書”來組裝應用部件RestControllerRestCo…

Maven高級——分模塊設計與開發

目錄 ?編輯 分模塊設計與開發 拆分策略 繼承與聚合 版本鎖定 聚合 作用 實現 Maven中繼承與聚合的聯系與區別&#xff1f; 聯系 區別 私服 分模塊設計與開發 將一個大項目拆分成若干個子模塊&#xff0c;方便項目的管理維護&#xff0c;擴展&#xff0c;也方便模…

線程池的七個參數設計源于對高并發場景下資源管理、系統穩定性與性能平衡的深刻洞察

?? 一、核心參數設計目標與解決的問題 參數設計目標解決的核心問題典型取值策略corePoolSize&#xff08;核心線程數&#xff09;維持常備線程資源避免頻繁創建/銷毀線程的開銷&#xff0c;提高響應速度CPU密集型&#xff1a;N_cpu 1 IO密集型&#xff1a;2 N_cpu maximum…

少樣本學習在計算機視覺中的應用:原理、挑戰與最新突破

在深度學習的黃金時代&#xff0c;大量標注數據似乎成了算法性能的前提。然而在許多現實場景中&#xff0c;如醫療圖像分析、工業缺陷檢測、遙感識別、甚至個性化視覺服務中&#xff0c;高質量、成規模的標注數據往往昂貴、稀缺&#xff0c;甚至難以獲得。這種場景正是**少樣本…

github在線圖床

github做的圖床&#xff0c;原理是利用github API實現的在線上傳&#xff0c;就一個頁面&#xff0c;css和js都是集成在頁面&#xff0c;相關信息保存在瀏覽器緩存中&#xff0c;配置一下即可使用 效果演示&#xff1a; github在線圖床 打開網站填寫下列信息 github用戶名&a…

css-多條記錄,自動換行與自動并行布局及gap兼容

實現這樣的內容布局&#xff0c;當一段文案長度超過當前行的時候自動占據一行&#xff0c;其他相近的不超過一行自動放在一行間隔隔開 關鍵實現原理&#xff1a; 彈性布局容器&#xff1a; .history-container {display: flex;flex-wrap: wrap;gap: 12px; }使用flex-wrap: wr…

Redis 哨兵模式部署--docker版本

redis sentinel 簡介 Redis Sentinel 是 Redis 官方提供的高可用&#xff08;HA&#xff09;解決方案&#xff0c;用于監控主從架構中的故障并自動完成故障轉移。當主節點&#xff08;Master&#xff09;宕機時&#xff0c;Sentinel 能自動選舉新的主節點&#xff0c;通知從節…

Java線程中的守護線程

Java線程中的守護線程在Java中&#xff0c;守護線程&#xff08;Daemon Thread&#xff09;是一種特殊類型的線程&#xff0c;它在后臺運行&#xff0c;主要用于支持其他線程&#xff08;如用戶線程&#xff09;的工作。守護線程不會阻止JVM&#xff08;Java虛擬機&#xff09;…

Flink-狀態恢復-isRestore分析

isRestored 方法返回值依賴 restoredCheckpointId 是否為空&#xff1a;restoredCheckpointId 在算子狀態句柄&#xff08;StreamOperatorStateHandler&#xff09;中從 StreamOperatorStateContext 獲取并賦值給 StateInitializationContext&#xff08;該 context 就是 initi…

rk3128 emmc顯示剩余容量為0

機器emmc 容量顯示異常&#xff0c;顯示剩余容量為0&#xff0c;這時候做了一個讓 系統不檢測GPP分區部分的操作&#xff0c;此問題才得以解決&#xff0c;如下&#xff1a; system/vold/DirectVolume.cpp -33,6 33,8 #include "VolumeManager.h"#include "Re…

WebAssembly國際化多語種支持

icu linux數據裁剪 先linux編譯出所有的工具 mkdir build && cd build ../configure --prefix=$(pwd)/build_wasm/install --enable-static --disable-shared --with-data-packaging=static --enable-tools=yes --enable-extras=yes --e…

Ubuntu 安裝 etcd 與 etcd-cpp-apiv3

目錄 安裝 etcd 安裝 etcd-cpp-apiv3 安裝 etcd sudo apt update sudo apt install etcd-server sudo apt install -y etcd-client 在 /etc/default/etcd 配置文件中配置&#xff0c;下面示例是單個服務器內進程之間交換信息且只有一個etcd節點。 #節點名稱&#xff0c;默認為…

Spring Boot 集成 GeoTools 詳解

目錄 一、概述二、集成優勢三、集成步驟四、使用場景五、案例&#xff1a;周邊設施查詢系統六、注意事項七、總結 一、概述 什么是 Spring Boot&#xff1f; Spring Boot 是由 Pivotal 團隊開發的基于 Spring 框架的快速開發工具&#xff0c;它通過自動配置、起步依賴等特性簡…