Question

我对canvas元素缺乏经验。我使用过最多的游戏是2013年的一款游戏，当时我可以自由使用requestAnimationFrame（）。

我想再次写一个像这样的游戏，但是当我嵌入使用React的网站时，我正在做它，而且动画似乎都没有更新。

无论如何，我想也许我可以使用下面的文章及其对svg动画的讨论来更手动地设置动画。我几乎没有修改原始文章中的代码。

canvas.html

<canvas id="canvas"  width="500" height="500">
    <svg id="animatedSvg" width="500" height="500" viewPort="0 0 500 500" version="1.1"
 xmlns="http://www.w3.org/2000/svg">
  <rect id="rect" x="10" y="10" width="100" height="100"  style="fill:rgb(0,0,255)">
    <animate attributeType="XML" attributeName="x" from="-100" to="120"
        dur="10s" repeatCount="indefinite"/>
  </rect>
  <script src="./anim.js"></script> 
</svg>

anim.js

setInterval(function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

if(Update){

    ctx.beginPath();

    ctx.clearRect(0,0,canvas.width,canvas.height);
    draw(canvas);
}

},10);

function draw(ele){
    var xmlDoc = new DOMParser().parseFromString(ele.outerHTML, "image/svg+xml");
var x = xmlDoc.documentElement.childNodes;
for (i = 0; i < x.length ;i++) {
    //html add textnodes before and after elements ignore them.
    if(x[i].nodeName == "#text" || x[i].nodeName == "script" || x[i].nodeName == "style"){ continue; }
    switch(x[i].nodeName)
    {
        case "rect":
            svgDrawRect(x[i]);
            break;
        case "text": svgDrawText(x[i]);
            break;
        case "svg": draw(x[i]);
        break;
    }
}
}

我刚刚放置了一个脚本标签来引用Javascript，但是即使更改样式，我也看不到实际的矩形。我看到的是矩形在其x范围内迭代，但它是不可见的。发生了什么事？

最终，我可能只使用react-canvas来代替。

链接->

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas#Adding_svg_animations_to_a_canvas

svg在示例中未显示在画布上，做出反应

0 个答案: