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>