标签: html5-canvas

到目前为止，我有以下代码。它在 HTML5 画布上绘制一行等距图块。但是，我想创建一个完整的楼层，而不仅仅是一行，尽管我尝试了很多，但还是失败了。

function createEmptyMapRow(x, r /* The offset in tiles. Setting this to 1 draws one row down. */)
{
    var cx = 0, lx = 0, ly = 0;
    while(cx != x)
    {
        renderImage(lx - (r * 32), ly + (r * 14), 'tile.png');
        lx = lx + 32;
        ly = ly + 14;
        cx++;
    }
}

如果你不想写代码，就给我一些逻辑。

我希望能够创建一个函数，为每一行从左到右放置图块。

我想使用画布显示视频，包括播放暂停功能，允许用户通过单击画布来切换播放，我还希望在视频暂停时在视频顶部绘制叠加层。这是如何在 javascript 中完成的？

画布可用于显示来自各种来源的视频。此示例展示了如何将视频加载为文件资源、显示它并在屏幕播放/暂停切换上添加一个简单的点击。

只是一个图像

就画布而言，视频只是一个图像。您可以像绘制任何图像一样绘制它。不同之处在于视频可以播放并且有声音。

获取画布和基本设置

// It is assumed you know how to add a canvas and correctly size it.
var canvas = document.getElementById("myCanvas"); // get the canvas from the page
var ctx = canvas.getContext("2d");
var videoContainer; // object to hold video and associated info

创建和加载视频

var video = document.createElement("video"); // create a video element
video.src = "urlOffVideo.webm"; 
// the video will now begin to load.
// As some additional info is needed we will place the video …

我想在 HTML5 画布中绘制一个弹簧，并显示该弹簧是否处于静止长度。我的弹簧连接到一些 XY 坐标的矩形形状，定义如下：

function Spring(restLenght, width, numRounds){
  this.x1 = 0;
  this.y1 = 0;
  this.x2 = 0;
  this.y2 = 0;
  this.restLenght = restLenght;
  this.width = width;
  this.numRounds = numRounds;
  this.color = "green";
  this.lineWidth = 6;
}

参数说明如下图：

当弹簧处于静止长度时，线应相互平行，否则意味着弹簧被拉伸或压缩。那么弹簧是什么状态就很明显了。

我现在坚持使用 bezierCurveTo() 方法：

这是我的小提琴：https : //jsfiddle.net/df3mm8kz/1/

function Spring(restLenght, width, numRounds){
  this.x1 = 0;
  this.y1 = 0;
  this.x2 = 0;
  this.y2 = 0;
  this.restLenght = restLenght;
  this.width = width;
  this.numRounds = numRounds;
  this.color = "green";
  this.lineWidth = 6;
}

var cv …

是否可以在 HTML SVG 或 Canvas 中创建小的动画足迹。我刚刚开始使用这些技术，这对于我正在从事的一个小项目来说非常必要。

我目前的想法是创建和使用动画足迹的“gif”。但我想知道是否可以通过 HTML/CSS/JS 以任何其他方式实现

PS：我一直提到的脚步声应该和哈利波特电影中“掠夺者地图”上出现的脚步声相似。

谢谢你的帮助

我需要在 HTML5 画布中制作以下形状。我曾尝试使用三次贝塞尔弧并剪下两个圆。

我怎样才能做出这个形状？

这是我正在进行的工作，只是无法正确完成

https://codepen.io/matt3224/pen/oeXbdg?editors=1010

var canvas = document.getElementById("canvas1");
var ctx1 = canvas.getContext("2d");

ctx1.lineWidth = 2;

ctx1.beginPath();
ctx1.bezierCurveTo(4, 42, 0, 0, 42, 4);
ctx1.moveTo(4, 42);
ctx1.bezierCurveTo(4, 42, 0, 84, 42, 84);
ctx1.stroke();

var canvas = document.getElementById("canvas2");
var ctx2 = canvas.getContext("2d");

ctx2.lineWidth = 2;

ctx2.beginPath();
ctx2.arc(55, 75, 50, 0, Math.PI * 2, true);
ctx2.moveTo(165, 75);
ctx2.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx2.fill();

所以我有一个像这样创建的二维数组：

//Fill screen as blank
for(var x = 0; x<500; x++ ){
    screen[x] = [];
    for(var y = 0; y<500; y++ ){
        screen[x][y] = '#ffffff';
    }
}

并且想知道是否有一种简单的方法可以将其转换为 ImageData 对象，以便我可以在画布上显示它？

我需要在 OffscreenCanvas 上做一些绘图，然后将其显示为 div 元素的背景图像。

最简单的方法是什么？

我正在使用 Codepen 演示，但在检查 chrome 中的 CPU 使用率后，它使用了大约 100% 的 CPU。经过努力，我无法弄清楚问题所在，因为我不是 javascript 和 canvas 方面的专家。我需要做哪些修改才能让它使用更少的 CPU。 Codepen Link 根据我的理解，问题出在动画粒子上，或者我错了。

// Global Animation Setting
window.requestAnimFrame = 
  window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function(callback) {
    window.setTimeout(callback, 1000/60);
};

// Global Canvas Setting
var canvas = document.getElementById('particle');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


// Particles Around the Parent
function Particle(x, y, distance) {
  this.angle = Math.random() * 2 * Math.PI;
  this.radius = Math.random() ; 
  this.opacity = …

我正在尝试将文本放在canvas元素内。在此示例中，我想将 48 像素高的文本放入 64 像素高的画布中。因此，文本应占画布高度的 3/4。然而，在我尝试过的所有内容中，文本只占据画布的上部，并且随着我制作的更大而被挤压到那个空间中。

如果我从 0, 0 开始；画布中什么也没有出现，所以我移到 0, 64 开始。这会将文本放在里面，但如前所述缩放比例已关闭。如果我一直到 0, 128 - 这对我来说甚至没有意义 - 文本被移动到画布的底部，但仍然被压扁。这里肯定有一些我不明白的定位。如何在画布中获取我指定的高度的文本？

let canvas = document.getElementById("cv");
let ctx = canvas.getContext("2d");

ctx.font = "48px Arial";
ctx.fillText("Hello World", 0, 64);

<canvas id="cv" style="border: 1px solid black; height: 64px; width: 300px;"></canvas>

大家好，所以我正在尝试在画布中制作一个可拖动的文本框。但是当我似乎无法弄清楚功能时。我想要做的就是在图像顶部拖动文本框。能够点击并拖动文本真的很酷。有人知道怎么做这个吗？它成为一个头痛。如果您有任何建议，那就太好了。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
   <canvas id="canvas" width='500' height='500' ref='canvas' @mousedown='handleMouseDown' @mouseout='resetSelectedText' @mouseup='resetSelectedText' @mousemove='handleMouseMove'></canvas>
   <input v-model="text" placeholder='type your text'>
   <button @click='addText'>
   add text
   </button>
   <div v-for="(text, index) in texts">
   {{text.text}} <div @click='removeText(index)'>X</div>
   </div>
   <img src ='https://shop-resources.prod.cms.tractorsupply.com/resource/image/18248/portrait_ratio3x4/595/793/4c37b7f6d6f9d8a5b223334f1390191b/JJ/ten-reasons-not-to-buy-an-easter-bunny-main.jpg' @click="changeBackground('http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv')">
   <img src ='https://ce.prismview.com/api/files/templates/43s327k3oqfsf7/poster/poster.jpg' @click="changeBackground('http://ce.prismview.com/api/files/templates/43s327k3oqfsf7/main/360/43s327k3oqfsf7_360.mp4')">

    <video id="video" ref='video' :src="source" controls="false" autoplay loop></video>

    </div>
<script>
        new Vue({
              el: '#app',
              data: {
                source: "http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv",
                canvas: null,
                ctx: null,
                video: null,
                text:'',
                timer: null,
                texts: [],
                selectedText: null,
                startX: null,
                startY: null
              },
                methods: {
                addText(){
                if(this.text.length){ …