тест, если браузер поддерживает «умножать» для globalCompositeOperation холст собственности

Question

мне нужно использовать режим multiply смешивания при нанесении на HTML холсте:

ctx.globalCompositeOperation = "multiply"; 
ctx.drawImage(...); 

я получить ожидаемый результат в последней Chrome/Firefox, но не в IE 11: он не падает, но я получаю тот же результат, что и при отсутствии свойства globalCompositeOperation.

Как я могу программно проверить, поддерживает ли браузер режим смешивания multiply?

Answer 1

Подобно тому, как многие операции в контексте, неправильно вход в globalCompositeOperation просто игнорируется, поэтому очень легко увидеть, поддерживается ли данный режим: просто установите его, затем прочитайте текущий режим, чтобы проверить, что он предоставлен.
Так просто быть ясно, вы могли бы использовать некоторые функции как этот:

// setCompositeMode : sets the globalCompositeOperation on provided context. 
// return true if mode is supported, false otherwise. 
function setCompositeMode(ctx, newMode) { 
    ctx.globalCompositeOperation = newMode; 
    return (ctx.globalCompositeOperation == newMode) ; 
} 

лишь небольшой пример:

var cv=document.createElement('canvas'); 
var ctx= cv.getContext('2d'); 

console.log(" Current (default) composite mode : " + ctx.globalCompositeOperation) ; 
console.log("setting 'destination-in'."); 
ctx.globalCompositeOperation = 'destination-in'; 
console.log(" composite mode : " + ctx.globalCompositeOperation) ; 
console.log("setting 'multiply'."); 
ctx.globalCompositeOperation = 'multiply'; 
console.log(" composite mode : " + ctx.globalCompositeOperation) ; 
console.log("setting 'i-don-t-exist' ."); 
ctx.globalCompositeOperation = 'i-don-t-exist'; 
console.log(" composite mode : " + ctx.globalCompositeOperation) ; 

выход (на Chrome/Mac OS, поддержка умножения):

" Current (default) composite mode : source-over" 
"setting 'destination-in'." 
" composite mode : destination-in" 
"setting 'multiply'." 
" composite mode : multiply" 
"setting 'i-don-t-exist' ." 
" composite mode : multiply" 

Answer 2

Поскольку режимы контекста API impliments композитных как внутренние свойства браузера, вы, вероятно, на самом деле выполнить .globalCompositeOperation='multiply' и посмотреть, если результат справедлив:

// pre-flight compatibility tests 
ctx.fillStyle='black'; 
ctx.fillRect(0,0,1,1); 
ctx.globalCompositeOperation='multiply'; 
ctx.fillStyle='white'; 
ctx.fillRect(0,0,1,1); 
var supportsMultiplyCompositing=(ctx.getImageData(0,0,1,1).data[0]===0);