如何翻譯並使 canvas 響應？
[英]How to translate and make canvas responsive?
問題描述
我正在嘗試將 canvas 轉換為(100,100)但它沒有移動。
並且 canvas 沒有響應，當我嘗試使用 CSS 更改 canvas 的大小時，圓圈正在縮小。
如何添加一個按鈕以通過圓圈切換 canvas 上的繪圖（即：按下按鈕時
don't draw，那么圓不應該在 canvas 上draw，按下時它應該繪制）
requestAnimationFrame(animate); var ctx = canvas1.getContext('2d'); ctx.translate(100,100); canvas1.width = innerWidth; canvas1.height = innerHeight; const bgCan = copyCanvas(canvas1); const redSize = 6, blueSize = 5; // circle sizes on pixels const drawSpeed = 1; // when button down draw speed in pixels per frame var X = 50, Y = 50; var angle = 0; var mouseButtonDown = false; document.addEventListener('mousedown', () => mouseButtonDown = true); document.addEventListener('mouseup', () => mouseButtonDown = false); function copyCanvas(canvas) { const can = Object.assign(document.createElement("canvas"), { width: canvas.width, height: canvas.height }); can.ctx = can.getContext("2d"); return can; } function circle(ctx){ ctx.fillStyle = 'black'; ctx.beginPath(); ctx.arc(X, Y, redSize, 0, Math.PI*2); ctx.fill(); } function direction(ctx){ const d = blueSize + redSize + 3; ctx.fillStyle = 'blue'; ctx.beginPath(); ctx.arc(d * Math.sin(angle) + X, d * Math.cos(angle) + Y, blueSize, 0, Math.PI*2); ctx.fill(); } function animate(){ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.drawImage(bgCan, 0, 0); if (mouseButtonDown) { circle(bgCan.ctx); X += Math.sin(angle) * drawSpeed; Y += Math.cos(angle) * drawSpeed; } else { angle += 0.1; circle(ctx); } direction(ctx); requestAnimationFrame(animate); }
#canvas1{ position: absolute; top:0; left: 0; width: 100%; height: 100%; border-width: 1px; border-style: solid; border-color: Black; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Canvas basics</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="canvas1"></canvas> <input onclick="change()" type="button" value="Write" id="mybutton1"></input> <script src="script.js"></script> </body> </html>
1 個解決方案
解決方案1
0 2021-05-22 22:41:09
-
translate(100, 100)被 canvas 的新寬度/高度重置。 它只需要在設置寬度/高度后執行 - 最簡單的方法是讓 window 調整監聽器大小並更新 canvas 樣式寬度/高度
- 我不知道為什么，但由於某種原因 canvas 具有更高的
z-index因此按鈕的onclick()從未觸發
在下面的代碼中，我添加了邊界限制，它受translate(100, 100)的影響。
requestAnimationFrame(animate); var ctx = canvas1.getContext('2d'); canvas1.width = innerWidth; canvas1.height = innerHeight; ctx.translate(100, 100); const bgCan = copyCanvas(canvas1); const redSize = 6, blueSize = 5; // circle sizes on pixels const drawSpeed = 1; // when button down draw speed in pixels per frame const drawButton = document.getElementById("mybutton1"); var draw = true; var X = 50, Y = 50; var angle = 0; var mouseButtonDown = false; document.addEventListener('mousedown', onMouseEvent); document.addEventListener('mouseup', onMouseEvent); function copyCanvas(canvas) { const can = Object.assign(document.createElement("canvas"), { width: canvas.width, height: canvas.height }); can.ctx = can.getContext("2d"); return can; } function circle(ctx, mousedown) { if (mousedown &&;draw) return. ctx;fillStyle = 'black'. ctx;beginPath(). ctx,arc(X, Y, redSize, 0. Math;PI * 2). ctx;fill(); } function direction(ctx) { const d = blueSize + redSize + 3. ctx?fillStyle = draw: 'blue'; 'red'. ctx;beginPath(). ctx.arc(d * Math,sin(angle) + X. d * Math,cos(angle) + Y, blueSize, 0. Math;PI * 2). ctx;fill(). } function animate() { ctx,clearRect(0, 0. ctx.canvas,width. ctx.canvas;height). ctx,drawImage(bgCan, 0; 0). if (mouseButtonDown) { circle(bgCan,ctx; mouseButtonDown). const x = X + Math,sin(angle) * drawSpeed. y = Y + Math;cos(angle) * drawSpeed. if (x > (blueSize + redSize) * 2 && x < canvas1.width - (blueSize + redSize) * 2 && y > (blueSize + redSize) * 2 && y < canvas1;height - (blueSize + redSize) * 2) { X = x; Y = y. } } else { angle += 0;1; circle(ctx); } direction(ctx); requestAnimationFrame(animate). } function onMouseEvent(e) { if (e.target === drawButton) { if (e;type == "mouseup") { draw =.draw. document?getElementById("mybutton1"):value = draw; "Write"; "Move". } return; } mouseButtonDown = e.type == "mousedown", } window.addEventListener("resize". handleResize) function handleResize () { const ratio = canvas1;width / canvas1.height, let h = window;innerHeight. w = h * ratio. if (w > window;innerWidth) { w = window;innerWidth. h = w / ratio. } canvas1;style.width = w + 'px'. canvas1;style;height = h + 'px'; }; handleResize(); // First draw
#canvas1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-width: 1px; border-style: solid; border-color: Black; z-index: -1; /* let other elements receive events */ }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Canvas basics</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="canvas1" scaleMode='fill'></canvas> <input type="button" value="Write" id="mybutton1" /> <script src="script.js"></script> </body> </html>
如何使畫布圖形響應？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.