MENU
Extracting Bitmaps
Below, we animate a graphical figure by flipping through an array of bitmap sprites extracted from a single image. Note that createImageBitmap() returns a promise.createImageBitmap() may take as the last parameter an object that sets options for the image's extraction. The available options are:imageOrientation: Specifies whether the image should be presented as is or flipped vertically. Either none (default) or flipY.premultiplyAlpha: Specifies whether the bitmap's color channels should be premultiplied by the alpha channel. One of none, premultiply, or default (default).colorSpaceConversion: Specifies whether the image should be decoded using color space conversion. Either none or default (default). The value default indicates that implementation-specific behavior is used.resizeWidth: A long integer that indicates the output width.resizeHeight: A long integer that indicates the output height.resizeQuality: Specifies the algorithm to be used for resizing the input to match the output dimensions. One of pixelated, low (default), medium, or high.
RESETRUNFULL
RESETRUNFULL
<!DOCTYPE html><html>
<head></head><body><canvas style="height:200px;width:400px;"></canvas>
<img/>
<script>
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext('2d'),
image = new Image();
image.onload = function() {
var arr = [];
for (let x=0; x<=340; x+=85)
for (let y=10; y<=110; y+=100){
if (y==110 && x>250) break;
arr.push(createImageBitmap(
image, x, y, 85, 100));
}
Promise.all(arr).then(function(sprites) {
var frame=0;
function animate(){
if (frame==6) frame = 0;
ctx.drawImage(sprites[frame], 0, 0);
frame++;
requestAnimationFrame(animate)
}
animate();
document.querySelector("img").src=image.src;
});
}
image.src = 'doraemon.png';
</script></body></html>