小编Pro*_*ang的帖子

HTML5画布drawImage无法在第一次单击时工作

我有一个画布,我使用javascript函数来显示文本和几个图像.我遇到的问题是点击确实执行该功能并显示文本,但并不总是放置图像.如果再次单击,则会显示图像.此行为在所有浏览器中都是一致的.命令不慢,只是第一次无法显示图像.TIA

// JavaScript Document

    function manualsTxt() {
        var theCanvas = document.getElementById('Canvas1');
        if (theCanvas && theCanvas.getContext) {
            var ctx = theCanvas.getContext("2d");

            if (ctx) {
                var img1 = new Image();
                var img2 = new Image();
                var img3 = new Image();
                img1.src = "images/InRoads2004.png";
                img2.src = "images/XMUp.png";
                img3.src = "images/XM.png";

                //clear canvas
                ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

                // .drawImage (src, posX, posY);
                ctx.drawImage (img1, 50, 325);
                ctx.drawImage (img2, 250, 325);
                ctx.drawImage (img3, 450, 325);

                ctx.textBaseline = 'bottom';
                ctx.font         = 'bold 30px sans-serif';
                ctx.fillStyle   = '#671420';
                ctx.fillText ('InRoads …
Run Code Online (Sandbox Code Playgroud)

html5 canvas drawimage

4
推荐指数
1
解决办法
5029
查看次数

标签 统计

canvas ×1

drawimage ×1

html5 ×1