Как средствами HTML5 Canvas реализовать отрисовку объектов сложной формы?

Question

[Михаил Пахмутов]

Здравствуйте. Хочу попробовать себя в разработке игры для изучения возможностей HTML5.

Вопрос 0:
Возможно ли создавать canvas объекты сложных форм загружая их из png файла с интерпретацией только не прозрачных областей?

Вопрос 1:
К примеру мы загрузили объект овальной формы (500х300пкс). Возможно ли от него отрезать часть произвольной формы (попадание пулевого выстрела в объект)?

Answer 1

[Сергей Мельников]

возможно, надо почитать про канвас и посмотреть, что другие на канвасе делают? или читать и гуглить не вариант?

Answer 2

[Евгений]

Не совсем понятно, но попробуйте попробовать спрайты

Answer 3

[personaljs]

You can use a black and white image as a mask using 'source-in' globalCompositeOperation. First you draw your mask image to the canvas, then you change the globalCompositeOperation to 'source-in', finally you draw your final image.

Your final image will only be draw where it overlay the mask.

var ctx = document.getElementById('c').getContext('2d');

ctx.drawImage(YOUR_MASK, 0, 0);
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(YOUR_IMAGE, 0 , 0);

https://developer.mozilla.org/samples/canvas-tutor...

var dimensions = {width: XXX, height: XXX}, //your dimensions
imageObj = document.getElementById('#image'), //select image for RGB
maskObj = document.getElementById('#mask'), //select B/W-mask
image = imageObj.getImageData(0, 0, dimensions.width, dimensions.height),
alphaData = maskObj.getImageData(0, 0, dimensions.width, dimensions.height).data; //this is a canvas pixel array

for (var i = 3, len = image.data.length; i < len; i = i + 4) {

    image.data[i] =  alphaData[i-1]; //copies blue channel of BW mask into A channel of the image

}

//displayCtx is the 2d drawing context of your canvas
displayCtx.putImageData(image, 0, 0, 0, 0, dimensions.width, dimensions.height);