Question

我制作了一个在网页上绘图的程序（比如Logo中的Turtle）。

绘制动画线条的代码例如： var liste_mouvements = []; var en_mouvement = false; var en_couleur = false; var ecrit = false; var timer;

function avancer(distance){
liste_mouvements.push(function(){
var iter = 1 ;

en_mouvement = true;
var compteur = 1 ;
timer = setInterval(function() {
    var Angle = angle % 360 ;
    var theta = Angle/180*Math.PI ;
    if (ecrit) {
        ctx.beginPath();
        ctx.moveTo(x,y);
        x = Math.cos(theta)*distance/vitesse + x ;
        y = Math.sin(theta)*distance/vitesse + y ; 
        ctx.lineTo(x,y);
        ctx.stroke();
    }
    else {
        x = Math.cos(theta)*distance/vitesse + x ;
        y = Math.sin(theta)*distance/vitesse + y ; 
    }  
    compteur++;
    if(compteur>vitesse){
        clearInterval(timer);
        en_mouvement = false;
        prochain_mouvement();
    }
},
duree/vitesse);
 });
  prochain_mouvement();
}

function prochain_mouvement() {
    if (!en_mouvement && !en_couleur && !changement_taille && liste_mouvements.length) {
        var mouvement = liste_mouvements.shift() ;
        mouvement();
}
} 
function AFFICHER_TEXTE(txt,x_txt,y_txt) {
liste_mouvements.push(function() {
    changement_taille = true ;
    en_couleur = true ;
    en_mouvement = true ;
    ctx.fillText(txt,x_txt,y_txt);
    changement_taille = false ;
    en_couleur = false ;
    en_mouvement = false ;
    prochain_mouvement();
});
}

我可以制作一个逐渐出现的网格（使用函数avancer（）和其他函数），我想用数字填充网格，这些数字也会逐渐显示，但数字会一起显示。

如何更改我的功能AFFICHER_TEXTE（）来执行此操作？

我还有其他问题。我有一个保存图像的功能：

function SAUVER_IMAGE(fileName) {
liste_mouvements.push(function() {
var Nom_Image = prompt("Nom de l'image", "Tortue");
if(Nom_Image==null){
    Nom_Image = "Tortue";
}
Nom_Image = Nom_Image + ".png";
var canvasElement = document.getElementById("dessin");

var MIME_TYPE = "image/png";

var image_URL = canvasElement.toDataURL(MIME_TYPE);

var Lien_Telechargement = document.createElement('a');
Lien_Telechargement.download = Nom_Image;
Lien_Telechargement.href = image_URL;
Lien_Telechargement.dataset.downloadurl = [MIME_TYPE, Lien_Telechargement.download, Lien_Telechargement.href].join(':');

document.body.appendChild(Lien_Telechargement);
Lien_Telechargement.click();
document.body.removeChild(Lien_Telechargement);
prochain_mouvement();
}); 
}

使用Firefox，在使用AFFICHER_TEXTE（）显示文本后调用保存图像的功能，但使用CHROME之前调用SAUVER_IMAGE（）函数，并且我保存的图像不完整。我该如何解决这个问题？

谢谢！

Canvas fillText：逐步显示数字

0 个答案: