在JavaScript中手動創建圖像並對alpha通道進行繪製？

我目前正在嘗試創建一個帶有動態生成圖像的頁面，這些圖像不是形狀，而是繪製到畫布中以創建動畫。在JavaScript中手動創建圖像並對alpha通道進行繪製？

我嘗試的第一件事是執行以下操作：

//create plenty of those: 
var imageArray = ctx.createImageData(0,0,16,8); 
//fill them with RGBA values... 
//then draw them 
ctx.putImageData(imageArray,x,y);

的問題是，圖像被重疊和putImageData簡單地把...中的數據的上下文中，沒有對於alpha通道作爲

像素在畫布替換批發，沒有組合物，α混合，無陰影等

：在W3C指定0

所以我想，我怎樣才能使用Image s而不是ImageData s？

我試圖找到一種方法將ImageData對象實際放回到圖像中，但它似乎只能放在畫布上下文中。因此，作爲最後的手段，我嘗試使用16x8畫布（我的圖像大小）的toDataURL()方法，並將結果保存爲我的〜600圖像的src。

結果是美麗的，但吃了我的CPU的100％...（它沒有與putImageData，約5％cpu）我的猜測是，由於某些未知的原因，圖像重新從每次繪製數據URI時都要使用image/png ......但那會很奇怪......不是嗎？它似乎比我以前的技術需要更多的內存。

因此，我不知道如何實現我的目標。

如何在JavaScript中動態創建Alpha通道圖像，然後在畫布上以可觀的速度繪製它們？

使用Java小程序是唯一真正的選擇嗎？

謝謝你的時間。

來源

2010-11-07 Manux

不知道，你真的想完成的任務：

你看看在drawImage - 方法渲染上下文的？基本上，它會爲你組合（如globalCompositeOperation屬性所指定的那樣），並允許你傳入一個畫布元素作爲源。

所以很可能做線沿線的東西：

var offScreenContext = document.getCSSCanvasContext("2d", "synthImage", width, height); 
var pixelBuffer = offScreenContext.createImageData(tileWidth, tileHeight); 
// do your image synthesis and put the updated buffer back into the context: 
offScreenContext.putImageData(pixelBuffer, 0, 0, tileOriginX, tileOriginY, tileWidth, tileHeight); 
// assuming 'ctx' is the context of the canvas that actually gets drawn on screen 
ctx.drawImage(
    offScreenContext.canvas,       // => the synthesized image 
    tileOriginX, tileOriginY, tileWidth, tileHeight, // => frame of offScreenContext that get's drawn 
    originX, originY, tileWidth, tileHeight   // => frame of ctx to draw in 
);

假設你有你要循環的動畫，這有隻具有一次生成幀入某種額外的好處精靈地圖，這樣在後續的迭代你永遠只需要調用ctx.drawImage() - 在增加內存佔用爲代價的，當然 ...

來源

2010-11-07 16:21:49 danyowdee

爲什麼不使用SVG？

如果你必須使用畫布，也許你可以實現在畫布上自己繪製圖像？

var red = oldred*(1-alpha)+imagered*alpha

...等等...

來源

2010-11-07 14:15:41 thejh

SVG創建我的圖像？或應用alpha蒙版？我不確定如何做到這一點。至於自己實現繪圖函數，afaik背後的代碼是本地代碼，所以我不認爲我可以真正做到這一點。或以像素爲單位操縱整個畫布像素陣列？它會很慢... – Manux 2010-11-07 14:22:17

Manux：你覺得它很慢嗎？至少V8（在Google Chrome中使用）afaik在執行JavaScript之前將其編譯爲本機代碼。 – thejh 2010-11-07 14:26:40

我正在使用chrome;我剛剛嘗試過，速度很慢，但比使用URI更快。我想我必須破解這樣的事情。 – Manux 2010-11-07 15:26:07

getCSSCanvasContext似乎只有WebKit的，但你也可以創建一個這樣的屏幕外畫布：

var canvas = document.createElement('canvas') 
canvas.setAttribute('width',300);//use whatever you like for width and height 
canvas.setAttribute('height',200);

然後，您可以使用drawImage方法繪製並繪製到另一個畫布上。

來源

2011-02-01 00:32:59

在JavaScript中手動創建圖像並對alpha通道進行繪製？

回答

相關問題