我的项目有一个HTML5 Canvas,在其上重复绘制图形对象.这些物体迅速变化.绘制它们需要时间.我怎样才能让它更快？

对象不是太复杂,但包含弧形,渐变,多边形等内容.

对象的外观取决于大约10个属性,每个属性具有大约10个值中的一个.这意味着只有大约100种不同的外观而不是对象可以拥有的外观.这就是为什么我只考虑绘制每个外观一次然后缓存位图以便重复使用.

一切都必须在客户端工作(即我不能使用现成的图像)

1. 使用HTML5 Canvas的最佳方法是什么？
2. 它是一个好主意还是使用位图的开销大于每次重新绘制对象的开销？

是否有能力检查在HTML5画布上呈现的对象,就像我们可以在Silverlight Spy中使用Silverlight一样？

如果我使用Chrome元素检查器,我只能检查DOM.

我有一个网页,可以快速从服务器流式传输JSON并显示其中的一些内容,大约10次/秒.一部分是base64编码的PNG图像.我发现了几种不同的显示图像的方法,但是所有这些方法都会导致无限的内存使用.它在几分钟内从50mb上升到2gb.适用于Chrome,Safari和Firefox.没试过IE.

我首先通过查看Activity Monitor.app发现了内存使用情况 - Google Chrome渲染器进程不断地占用内存.然后,我看着Chrome的资源检查器(View> Developer> Developer Tools,Resources),我看到它被缓存的图像.每次我更改img src,或创建一个新的Image()并设置它src,Chrome缓存它.我只能想象其他浏览器也在做同样的事情.

有没有办法控制这个缓存？我可以把它关掉,或做鬼鬼祟祟的事情,这样就不会发生吗？

编辑:我希望能够在Safari/Mobile Safari中使用该技术.此外,如果有人有任何想法,我会对其他快速刷新图像的方法持开放态度.

这是我尝试过的方法.每个驻留在一个在AJAX完成时调用的函数.

方法1 - 直接src在img标记上设置属性

快速.显示得很好.泄漏就像疯了似的.

$('#placeholder_img').attr('src', 'data:image/png;base64,' + imgString);

方法2 - img用a 替换canvas,并使用drawImage

显示正常,但仍然泄漏.

var canvas = document.getElementById("placeholder_canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0); 
}   
img.src = "data:image/png;base64," + imgString;

方法3 - 转换为二进制并替换canvas内容

我在这里做错了 - …

如何Raphael在窗口更改时重新缩放画布内的所有元素？

考虑下面的代码/ DEMO如果我重新div container调整我的窗口大小只是缩放,因为我将其宽度设置为窗口宽度的50%而没有(rect,circle或path)更改

码

<div id="container"></div>?
 #container{border : 1px solid black ;
               width : 50% ;
               height:300px}?
var con = $("#container");
var paper = Raphael(con.attr('id'), con.attr('width'), con.attr('height'));
var win = paper.rect(0,0,400,300).attr({stroke: 'black' }) ; 
var path = paper.path("M 200 100 l 100 0 z") ; 
var cir = paper.circle(50, 50, 40);

​

我打算写一个游戏,它会使用很多精灵和图像.起初我尝试了EaselJS但是玩了一些其他基于画布的游戏,我意识到它并不是那么快.当我看到Mozilla的BananaBread时,我想"如果WebGL可以如此快地完成3D,那么它可以更快地完成2D".所以我转移到了three.js(使用平面和透明纹理,精灵的纹理偏移).

问题是:它更好吗？快点？大多数WebGL游戏都是3D游戏,那么我应该使用2D 2D和WebGL的3D画布上下文吗？我也注意到2D中没有WebGL库(除了WebGL-2d,但它的级别很低).

请注意兼容性不是我最关心的问题,因为我不打算很快发布任何东西:).

我能够在HTML画布上成功绘制图像.但我需要能够在画布上拖动图像.

我知道这个函数可以通过一些像KinectJS这样的JavaScript库轻松实现.但我想用简单的JavaScript做到这一点.

window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var destX = 0;
var destY = 0;
var imageObj = new Image();

imageObj.onload = function(){
  context.drawImage(imageObj, destX, destY);
};
imageObj.src = "westeros.png";

<canvas id="myCanvas" height=1024 width=360></canvas>

我已经知道怎么做了

- >调整图像大小:

var image = document.getElementById('myImage'),
    canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');
ctx.drawImage(image,0,0,400,300);

- >或裁剪图像:

var image = document.getElementById('myImage'),
    canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');
ctx.drawImage(image,50,50,image.width,image.height,0,0,50,50);

但我不知道如何调整大小然后裁剪图像.我怎么能这样做？谢谢.

他们是这样的图书馆吗？

任何浏览器都不支持AFAIK dataToURL('image/gif')

我必须在路径上移动小矩形.在画布内单击后,矩形会移动.

我无法为它设置动画,因为对象只是跳到所需的点.

请在小提琴上找到代码.

HTML

<canvas id="myCanvas" width=578 height=200></canvas>

CSS

#myCanvas {
    width:578px;
    height:200px;
    border:2px thin;
}

JavaScript的

var myRectangle = {
    x: 100,
    y: 20,
    width: 25,
    height: 10,
    borderWidth: 1
};

$(document).ready(function () {
    $('#myCanvas').css("border", "2px solid black");
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var cntxt = canvas.getContext('2d');
    drawPath(context);
    drawRect(myRectangle, cntxt);

    $('#myCanvas').click(function () {
        function animate(myRectangle, canvas, cntxt, startTime) {
            var time = (new Date()).getTime() - startTime;
            var linearSpeed = 10;
            var newX = Math.round(Math.sqrt((100 …

我们正在开发一个可视化Web应用程序,它使用d3-force在画布上绘制网络.由于每个节点都包含大量信息,并且由于CPU占用大量资源来重绘每个帧的所有内容,因此我们实现了一种缓存,其中每个节点都在其画布上绘制(未链接到DOM),每个缩放级别一次.然后在节点的位置在主画布(链接到DOM)上绘制那些画布.

我们对速度增益感到满意,即使结果现在是内存密集型(特别是在hidpi显示器(视网膜)上,像素密度可以是2或3).

但现在我们在iOS上遇到了浏览器的问题,在与界面进行少量交互后,进程崩溃了.回想一下,这对于旧版本(iOS12之前)来说不是问题,但是我没有任何未更新的设备来确认这一点.

我认为这段代码总结了这个问题:

const { range } = require('d3-array')

// create a 1MB image
const createImage = () => {
    const size = 512

    const canvas = document.createElement('canvas')
    canvas.height = size
    canvas.width = size

    const ctx = canvas.getContext('2d')
    ctx.strokeRect(0, 0, size, size)
    return canvas
}

const createImages = i => {
    // create i * 1MB images
    let ctxs = range(i).map(() => {
        return createImage()
    })
    console.log(`done for ${ctxs.length} MB`)
    ctxs = null
}

window.cis = createImages …