Javascript HTML5 pour créer une planche à dessin simple avec des compétences en images_javascript

Voir la photo :

Le code est le suivant :

Copiez le code Le code est le suivant : 🎜>

Table à dessin simple

#eraseImg{ /*Style de gomme*//**/ bordure :solide ; couleur :gris ; rayon de bordure : 118 px ; largeur : 5 px ; position : absolue ; none ;

} .eraseSeries{ /*Disposition des groupes de boutons radio de la taille d'un caoutchouc, ce div n'occupe pas une ligne séparée*/ affichage : bloc en ligne ; }

var c;//La planche à dessin 2d obtenue var painting = false;//Détermine si la peinture est en cours, c'est-à-dire si le bouton gauche de la souris est appui long var canvas;//Artboard $(function(){

$(".eraseSeries").hide();//Le groupe de boutons radio de l'état initial est masqué

canvas= document.getElementById("myCanvas"); c=canvas.getContext("2d"); c.lineCap="round";//Définissez les coins de l'écriture manuscrite, sinon le l'écriture manuscrite sera cassée c .StrokeStyle="black";//La couleur de l'écriture manuscrite c.lineWidth=5;//L'épaisseur de l'écriture $("#color").change (function(){//Lorsque la couleur de l'écriture manuscrite change if(eraseFlag==true)//Dans l'état d'effacement { $("#erase").trigger("click" );//Déclencher automatiquement l'événement de clic de la gomme pour revenir à l'état du pinceau } c.strokeStyle=$(this).val();//Définir l'état du pinceau c.lineWidth=$ (this).val();

});

$("#fontSize").change(function(){//L'épaisseur du pinceau change if(eraseFlag= =true)//Identique à ci-dessus { $ ("#erase").trigger("click"); } c.lineWidth=$(this).val(); c.StrokeStyle=$("#color").val (); //eraseFlag=false;

$(".eraseSeries").click( function(){//La taille de la gomme change var size= $('input[name="eraseSize"]:checked').val();//Obtenir la valeur sélectionnée du groupe de boutons radio de la gomme sizeE=size;//Transférez la valeur à la variable globale, sizeE doit être utilisé pour contrôler la position du style de gomme c.lineWidth=size $("#eraseImg").css( {"width" :size "px","height":size "px"} );//La taille du style de gomme change });

$("#erase"). toggle(function(){//L'événement click flip du bouton en caoutchouc c.save( );//Conserver le dernier état défini eraseFlag=true; c.strokeStyle="white";

$("#erase").text("Brush");/ /Changer le texte sur le bouton $(".eraseSeries").show('fast');//Eraser le groupe radio apparaît // $("#eraseImg").show(); sizeE=5

},function(){ eraseFlag=false; 🎜>$("#erase").text("Eraser"); $( ".eraseSeries").hide('fast'); c.restore();//Restaurer le dernier pinceau état (y compris la couleur, l'épaisseur, etc.) } ;

//setInterval(paint,2);

} ; p_x;//Dernière position de la souris var p_y; var p_x_now;//Position actuelle de la souris var p_y_now; 🎜> $(document).mousedown(function(e){//Souris enfoncée Événement déclencheur

// alert(sizeE); p_x= e.clientX;// Obtenez la position et définissez-la comme dernière position de la souris p_y= e.clientY; painting = true;//Brush start flag

} $(document).mousemove); (function(e){//Événement déclencheur de mouvement de la souris if(eraseFlag==true&& e .clientY>30)//La gomme est active et la position de la souris Y est supérieure à 30, c'est-à-dire que la la souris est dans la planche à dessin {

//L'image de la gomme se déplace avec la souris $( "#eraseImg").animate({left: e.clientX-sizeE "px", top : e.clientY-sizeE "px"},0).show('fast'); } else { $("#eraseImg").hide('fast' ); } if(painting==true)//Le pinceau est actif { / /alert(1); p_x_now= e.clientX;//Position de la souris à le moment actuel p_y_now= e.clientY; c.beginPath();//Chemin de départ //Courbe Il est composé de très petites lignes droites et la vitesse de fonctionnement de l'ordinateur est très rapide. est une façon de dessiner de manière itérative des courbes avec des lignes droites c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop) ;//Déplacer vers le point de départ c.lineTo(p_x_now- 5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//Trace une ligne droite du point de départ au point final

c.stroke( ); c.closePath(); //Chemin fermé, c'est très important. Si le chemin n'est pas fermé, // alors tant que la couleur de la toile change, toutes les couleurs précédemment peintes changeront p_x = p_x_now;//Après une itération, la valeur de coordonnée instantanée actuelle est attribuée à la dernière valeur de coordonnée de la souris p_y = p_y_now; }

}

$( document).mouseup(function(e)); {//Événement déclencheur de déclenchement de la souris

painting=false;//Geler le pinceau });

红色 黄色 蓝色 黑色 绿色

5 10 15 20 30 擦皮 5 10 15 20 30

btn -->