canvas 相关问题

Canvas是自由格式图形输出的通用元素。

在画布中模拟重力时遇到问题 😰😰

伙计们，我的画布中的重力东西遇到了问题！我提供的代码👇 尝试以不同的方式计算位置，预计它会像往常一样加速下降，但它......

javascript html canvas

回答 1 投票 0

如何将元素放在 Canvas 上并将其位置绑定到 Avalonia 中元素的 viewModel

我正在尝试创建一个编辑器，您可以在其中将预定义的形状放置到画布上，然后与它们交互。我了解如何使用 Canvas.SetTop() 将我的形状放在画布上的特定位置

c# canvas mvvm avaloniaui avalonia

回答 1 投票 0

Python Kivy 中的二维图形，需要建议

我还在研究Kivy的世界，也遇到了一些问题。我正在设计一个界面。它必须具有模拟设备的外观，带有箭头和弯曲刻度，就像旧伏特美一样......

python canvas kivy

回答 2 投票 0

如何使用 Tkinter 中的 Checkbuttom 隐藏或显示由滑块控制的画布线？

使用下面的代码可以控制三角信号的幅度和频率。刚开始使用 Python，我无法使用 tkint 中的检查按钮隐藏或显示给定信号...

python tkinter canvas checkbox tkinter.checkbutton

回答 1 投票 0

简单 javascript 游戏中的碰撞

我正在用 javascript 编写一个简单的游戏，我想知道处理玩家和世界对象之间碰撞的最佳方法是什么。 var isJumping = false; var isFalling = fa...</desc> <question vote="0"> 我正在用 JavaScript 编写一个简单的游戏，我想知道处理玩家和世界对象之间碰撞的最佳方法是什么。 <pre><code><script> var isJumping = false; var isFalling = false; var w = 1; var recwidth = 400; var recheight = 400; var xpos = 50; var ypos = 279; window.onload = function() { var FPS = 30; var ground = new myObject(); setInterval(function() { clear(); draw(); ground.draw(0, 325); ground.draw(125,325) }, 1000/FPS); }; function myObject(){ this.draw = function drawground(groundx, groundy){ var canvas = document.getElementById('canvas') var context = canvas.getContext('2d'); //context.fillRect(xpos,ypos,100,100); var img=new Image() img.src="ground.png" img.onload = function() { context.drawImage(img,groundx,groundy)} } }; function jump() { var t=.1; isJumping=true; var jumpint= setInterval(function() { yup = 12*t-(5*t*t); ypos= ypos - yup; t = t + .1 if(yup < 0) { isJumping = false; isFalling = true; clearInterval(jumpint); jumpint = 0; fall(); return; } }, 20); } function fall() { t=.10 var fallint= setInterval(function() { ydown = (5*t*t); ypos= ypos + ydown; t = t + .1 if(ypos > 275) { isFalling == false; clearInterval(fallint); fallint = 0; return; } }, 20); } function changex(x){ xpos = xpos + (x); //clear(); //draw(); } function changey(y){ ypos = ypos + (y); //clear(); //draw(); } function draw(){ var canvas = document.getElementById('canvas') var context = canvas.getContext('2d'); var img=new Image() img.src="character.png" img.onload = function() { context.drawImage(img,xpos,ypos)} } function clear(){ var canvas = document.getElementById('canvas') var context = canvas.getContext('2d'); context.clearRect(0,0, canvas.width, canvas.height); } document.onkeydown = function(event) { var keyCode; if(event == null) { keyCode = window.event.keyCode; } else { keyCode = event.keyCode; } switch(keyCode) { // left case 37: //left changex(-5); break; // up case 38: // action when pressing up key jump(); break; // right case 39: // action when pressing right key changex(5); break; // down case 40: // action when pressing down key changey(5); break; default: break; } } </script> </code></pre> 因此，正如您所看到的，到目前为止我正在创建两个对象，并且玩家在任意点停止掉落。我觉得这个阶段的碰撞不会太困难，但是一旦我开始添加更多，我觉得它会变得更加困难。我不会为对象的每个实例使用具有相同图像的对象实例，因此在某些时候我将更改 myobject 函数以能够接受图像作为参数，然后检查碰撞会有点棘手。我还计划将其制作为横向卷轴，因此一旦击中地图的一端，它就会更改为下一个区域，这将导致性能问题。如果我每隔一段时间就检查整个游戏中每个对象的碰撞情况，我想事情会变得很慢。限制检查的冲突数量的最佳方法是什么？显然，如果该对象不在屏幕上，则无需检查它，但有没有办法限制它。我正在考虑为游戏的每一帧创建一个数组，并用它的对象填充该数组。然后，只检查玩家当前所在帧的数组。这是否可行，还是会导致太多问题？任何帮助是极大的赞赏。 </question> <answer tick="false" vote="-1"> 编辑：您可以使用 <pre><code>(sprite.x < sprite2.x + sprite2.width && sprite.x + sprite.width > sprite2.x && sprite.y < sprite2.y + sprite2.height && sprite.y + sprite.height > sprite2.y)</code></pre> 进行矩形碰撞，使用 <pre><code>Math.hypot(sprite.x, sprite.y) - Math.hypot(sprite2.x, sprite2.y) <= 0</code></pre> 进行圆形碰撞，以及将它们组合起来以形成相对准确的边界框。 如果你想要像素完美的碰撞，我有一些简单的 JavaScript 代码，可以与 canvas2d 渲染上下文配合使用。 <pre><code>function collide(sprite, sprite2, minOpacity=1) { // Rectangular bounding box collision if (sprite.x < sprite2.x + sprite2.width && sprite.x + sprite.width > sprite2.x && sprite.y < sprite2.y + sprite2.height && sprite.y + sprite.height > sprite2.y) { // Finds the x and width of the overlapping area var overlapX = (this.rect.x > other.rect.x) ? [this.rect.x, (other.rect.x + other.rect.width) - this.rect.x + 1] : [other.rect.x, (this.rect.x + this.rect.width) - other.rect.x + 1]; // Finds the y and height of the overlapping area var overlapY = (this.rect.y + this.rect.height > other.rect.y + other.rect.height) ? [this.rect.y, (other.rect.y + other.rect.height) - this.rect.y + 1] : [other.rect.y, (this.rect.y + this.rect.height) - other.rect.y + 1]; // Creates a canvas to draw sprite.image to var spriteImageCanvas = new OffscreenCanvas(overlapX[0] + overlapX[1], overlapY[0] + overlapY[1]); var spriteImageCanvasContext = spriteImageCanvas.getContext("2d"); // Draws sprite.image to spriteImageCanvasContext spriteImageCanvasContext.drawImage(this.image, sprite.x, sprite.y, sprite.width, sprite.height); // Creates a canvas to draw sprite2.image to var sprite2ImageCanvas = new OffscreenCanvas(overlapX[0] + overlapX[1], overlapY[0] + overlapY[1]); var sprite2ImageCanvasContext = otherImageCanvas.getContext("2d"); // Draws sprite2.image to sprite2ImageCanvasContext sprite2ImageCanvasContext.drawImage(sprite2.image, sprite2.x, sprite2.y, sprite2.width, sprite2.height); // Loops through the x coordinates in the overlapping area for (var x = overlapX[0]; x <= overlapX[0] + overlapX[1]; x++) { // Loops through the y coordinates in the overlapping area for (var y = overlapY[0]; y <= overlapY[0] + overlapY[1]; y++) { if (/* Checks if the pixel at [x, y] in the sprite image has an opacity over minOpacity input */ thisImageCanvasContext.getImageData(x, y, 1, 1).data[3] >= minOpacity && /* Checks if the pixel at [x, y] in the sprite2 image has an opacity over minOpacity input */ otherImageCanvasContext.getImageData(x, y, 1, 1).data[3] >= minOpacity) { return true; }; }; }; }; } </code></pre> 或者，如果您只想矩形碰撞，请使用函数中的第一个 if 语句。 </answer> </body></html>

javascript html canvas game-physics

回答 0 投票 0

在 dart 中创建旋转矩形

我有一个有趣的问题。我正在颤动的画布上绘制一个矩形。我使用 Rect 对象来定义矩形的外观。如果我使用画布旋转功能，我会得到...

flutter dart canvas rotation rectangles

回答 1 投票 0

如何使用toDataURL创建无损WebP图像？

我正在使用 canvas 元素在 Chrome 中尝试 WebP 图像格式。在 MDN 上，我看到 toDataURL 接受第二个参数，表示结果图像的质量。我想生成一个

javascript html google-chrome canvas webp

回答 2 投票 0

内容安全策略：“img-src'self'数据：”

我有一个应用程序，用户可以在其中复制图像 URL，将其粘贴到输入中，然后图像将加载到框中。但我的应用程序不断触发此消息：拒绝加载即时通讯...

html canvas ionic-framework content-security-policy

回答 8 投票 0

我想使用canvas但是出现错误

代码： const { createCanvas, loadImage } = require('canvas') 常量画布 = createCanvas(200, 200) const ctx = canvas.getContext('2d') // 写“太棒了！” ctx.font = '30px 影响' ctx.rot...

node.js canvas discord.js node-canvas replit

回答 2 投票 0

与其他软件和程序相比，JavaScript 粒子性能背后的原因

你好，我是编程新手，我编写了一个简单的 JavaScript，用于绘制在 2D x,y 坐标中移动的简单 canvas.arc 圆。出于好奇，我用 1 个粒子 10 运行了动画，...

javascript performance canvas particles

回答 1 投票 0

我可以将字体以大尺寸渲染到 HTML 画布上，然后对其进行缩减采样以适合画布吗？

我有一个小画布：我正在缩放它以适应窗口： html, 身体 { 填充：0；玛...

javascript html css canvas

回答 1 投票 0

将画布数据保存为 mp4 - Javascript

我有一个动画画布，我想将其转换为mp4。我正在使用 MediaRecorder 捕获屏幕，然后转换该 Blob。我了解到 MediaRecorder 不允许在 mp 中录制...