如何將 object 與 canvas api 輪換，但之后什么也沒有？
[英]How do I rotate an object with the canvas api but nothing afterward?
問題描述
我正在嘗試制作一個卡通生成器應用程序並允許用戶旋轉對象但是當我測試它時，它會旋轉它后面的所有東西。我將旋轉固定為 270 度以解決問題，我知道如何在 p5 中執行此操作.js 和 processing.js 但我想在 canvas api 中寫這個。有人知道是否有類似於 p5 的 pop() 和 push() 函數的東西嗎？
<doctype html> <html> <head> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <input type="number" placeholder="width" id="width"> <input type="number" placeholder="height" id="height"> </body> <script> var canvas=document.getElementById("canvas") var ctx=canvas.getContext("2d") ctx.rotate(270); ctx.fillRect(200,200,200,50); //line should be flat ctx.beginPath(); ctx.moveTo(100,100); ctx.lineTo(150,100); ctx.closePath(); ctx.stroke(); </script> <style> canvas{ background-color:blue; } </style> </html>
1 個解決方案
解決方案1
1 已采納 2022-09-30 18:28:22
我想你想要context.save(); 和context.restore();
如何在畫布和 js 中旋轉對象； 我的例子沒有像我期望的那樣旋轉
[英]How do I rotate an object in canvas and js; my example is not rotating how I expect
如何旋轉整個畫布和同時繪制到畫布中的圖像？
[英]How do I rotate the entire canvas and an image drawn into the canvas at the same time?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.