canvas 绘制矩形然后消失 javascript

Question

我想要一个带有背景图像的 canvas，并在顶部绘制矩形。这些矩形在我的应用程序中称为热点。他们被吸引到 canvas 然后迅速消失。我怎样才能让他们留下来？

appendSection() 首先使用 appendPicture() 附加一张图片，它只是将 canvas 附加到 div，然后在该函数具有运行之后，canvas并制作了上下文，然后对于每个热点，在这种情况下有 3 个，它将绘制一个矩形，它会绘制，然后它们消失。

function appendSection(theSection, list) {
        list.append('<label class="heading">' + theSection.description + '</label><br/><hr><br/>');
        if (theSection.picture) {
            appendPicture(list, theSection);
            var canvas = document.getElementById('assessmentImage');
            var ctx=canvas.getContext("2d");
             var img=new Image();
                img.onload = function() {
                    ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
                }
                img.src = "data:image/jpeg;base64,"+ theSection.picture;
            if(theSection.allHotSpots.length > 0) {
                for( var x = 0; x < theSection.allHotSpots.length; x++) {
                    appendHotSpot(list, theSection.allHotSpots[x], theSection.thePicture, ctx);
                }
            }
        }
        appendSectionQuestions(theSection, list);
        if (theSection.allSubSections) {
            for (var x = 0; x < theSection.allSubSections.length; x++) {
                var theSectionA = theSection.allSubSections[x];
                appendSection(theSectionA, list);
            }
        }
    }

    function appendHotSpot(list, HotSpot, picture, ctx) {
        var imageWidth = document.getElementById('assessmentImage' + platform).clientWidth;
        var imageHeight = document.getElementById('assessmentImage' + platform).clientHeight;

        var xScale = imageWidth / picture.xSize;
        var yScale = imageHeight / picture.ySize;

        HotSpot.topLeft = [Math.round(HotSpot.topLeft[0] * xScale), Math.round(HotSpot.topLeft[1] * yScale)];
        HotSpot.bottomRight = [Math.round(HotSpot.bottomRight[0] * xScale), Math.round(HotSpot.bottomRight[1] * yScale)];


        var rect = {x1: HotSpot.topLeft[0], y1: HotSpot.topLeft[1], x2: HotSpot.bottomRight[0], y2: HotSpot.bottomRight[1]};



        ctx.fillStyle = "#FF0000";
        ctx.fillRect(rect.x1, rect.y1, rect.x2, rect.y2);

        //addRect("blue", rect);

    }

    function appendPicture(list, theSection) {


            list.append('<div id="wrapper' + platform + '" style="width:100%; text-align:center">\
                <canvas class="assessmentImageSmall" style="width:100%;" id="assessmentImage' + platform + '" align="middle" ></canvas>\
                <!--<p style="color:#666;" id="imageInstruction">Tap image to enlarge.</p>-->\
                </div>');
            $("#wrapper").kendoTouch({
                                         tap: function (e) {
                                             switchImage();
                                         }
                                     });
    }

Answer 1

看起来你的矩形正在被绘制，然后图像（异步加载）最终被加载并绘制在矩形之上——使它们消失。

将 if(theSection.allHotSpots.length > 0 放在 onload 中，这样图像以后就不会破坏 rects。

canvas 绘制矩形然后消失 javascript

canvas rectangles get drawn then disappear javascript

javascript

canvas

draw