[英]HTML5 canvas drawImage() not working on FireFox
問題:我正在做一個項目,我需要在 canvas 上繪制符號動畫。 這很棒並且可以在 chrome 上工作,但是在 FireFox 上它什么也沒畫。 沒有錯誤消息或任何東西。
這甚至是問題嗎?
我可以用別的東西來達到同樣的效果嗎?
是否可以在所有瀏覽器上使用此方法?
我的整個 function:
DRAW_ANIM(ctx, dimensions, drawProperties, svg){
let dashAnim = drawProperties.dash;
let svgStart = svg[0]; // -- sets up the first part to keep te elements rendered --
/* -- sets the size a bit smaller than the cell -- */
dimensions.x += dimensions.w * .1;
dimensions.y += dimensions.h * .1;
dimensions.w *= .8;
dimensions.h *= .8;
let maxRange; // -- number of total elements --
let range = 1; // -- currently animated --
let index = 1;
while (svg[1].indexOf(`id="s${index}"`) != -1) { // -- gets the total number of elements --
maxRange = index;
index++;
}
/* -- from the dashOffset value animates to 0 -- */
var t = TweenMax.to(dashAnim, this.calcElemAnimDur(maxRange, drawProperties.animDur), { value: 0 });
render();
function render() {
/* -- element id => id="s<index>" because can't be a regular int -- */
let style = `
#s${range}{
stroke: ${drawProperties.strokeColor};
stroke-dashArray: ${svg[2]} !important;
stroke-dashOffset: ${dashAnim.value} !important;
}
`;
let xml = svgStart + style + svg[1]; // -- inserts the style and joins the svg --
let svg64 = btoa(xml); // -- b64 encode --
let b64Start = 'data:image/svg+xml;base64,'; // -- the header --
let image64 = b64Start + svg64; // -- joins tghe header and the b64 svg --
let img = new Image(); // -- a new image --
img.onload = () => { // -- if the image is ready draws it --
/* -- clears the area to draw a new frame -- */
ctx.clearRect(dimensions.x - drawProperties.shadowSize * 1.2,
dimensions.y - drawProperties.shadowSize * 1.2,
dimensions.w + drawProperties.shadowSize * 2.4,
dimensions.h + drawProperties.shadowSize * 2.4);
/* -- sets up the style -- */
ctx.shadowColor = drawProperties.shadowColor;
ctx.shadowBlur = drawProperties.shadowSize;
/* -- draws the image -- */
ctx.drawImage(img,
dimensions.x,
dimensions.y,
dimensions.w,
dimensions.h);
}
img.src = image64; // -- sets the image to the svg --
if (dashAnim.value == 0) { // -- if finished with one element gets the next --
range++;
svgStart += style; // -- keeps the finished element rendered --
t.play(0);
}
if (range > maxRange) { return } // -- if animation is ready ends the loop --
window.requestAnimationFrame(render); // -- the next frame --
}
}
重要的部分:
let xml = svgStart + style + svg[1]; // -- inserts the style and joins the svg --
let svg64 = btoa(xml); // -- b64 encode --
let b64Start = 'data:image/svg+xml;base64,'; // -- the header --
let image64 = b64Start + svg64; // -- joins tghe header and the b64 svg --
let img = new Image(); // -- a new image --
img.onload = () => { // -- if the image is ready draws it --
/* -- clears the area to draw a new frame -- */
ctx.clearRect(dimensions.x - drawProperties.shadowSize * 1.2,
dimensions.y - drawProperties.shadowSize * 1.2,
dimensions.w + drawProperties.shadowSize * 2.4,
dimensions.h + drawProperties.shadowSize * 2.4);
/* -- sets up the style -- */
ctx.shadowColor = drawProperties.shadowColor;
ctx.shadowBlur = drawProperties.shadowSize;
/* -- draws the image -- */
ctx.drawImage(img,
dimensions.x,
dimensions.y,
dimensions.w,
dimensions.h);
}
img.src = image64;
解決方案:
問題確實不在於 drawImage() 方法。 這就是我編寫 svg 的方式。
錯誤的:
<svg class="svg x-color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 403.54 403.54">
<defs>
<style>
.shape{
fill: transparent;
stroke-dasharray: 570;
stroke-dashoffset: 570;
}
</style>
</defs>
<line id="s1" class="shape" x1="1.77" y1="1.77" x2="401.77" y2="401.77"/>
<line id="s2" class="shape" x1="401.77" y1="1.77" x2="1.77" y2="401.77"/>
</svg>
好的:
<svg class="svg x-color" xmlns="http://www.w3.org/2000/svg" width="403.54" height="403.54" version="1.1">
<defs>
<style>
.shape{
fill: transparent;
stroke-dasharray: 570;
stroke-dashoffset: 570;
}
</style>
</defs>
<line id="s1" class="shape" x1="1.77" y1="1.77" x2="401.77" y2="401.77"/>
<line id="s2" class="shape" x1="401.77" y1="1.77" x2="1.77" y2="401.77"/>
</svg>
感謝 Helder Sepulveda
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.