HTML5-Javascript zum Erstellen eines einfachen Zeichenbretts mit Bildern_Javascript-Kenntnissen-js-Tutorial-php.cn

Siehe Bild:

Der Code lautet wie folgt:

Kopieren Sie den Code Der Code lautet wie folgt: 🎜>

Einfaches Zeichenbrett >*/ display: inline-block; ;

var c;//Das erhaltene 2D-Zeichenbrett var painting = false;//Bestimmen Sie, ob das Malen ausgeführt wird, d. h. ob die linke Maustaste gedrückt wird langes Drücken var canvas;//Zeichenfläche $(function(){

$(".eraseSeries").hide();//Anfangsstatus-Optionsfeldgruppe ist ausgeblendet

canvas= document.getElementById("myCanvas"); c=canvas.getContext("2d"); c.lineCap="round";//Legen Sie die Ecken der Handschrift fest Die Handschrift wird gebrochen c .StrokeStyle="black";//Die Farbe der Handschrift c.lineWidth=5;//Die Dicke der Handschrift $("#color").change (function(){//Wenn sich die Farbe der Handschrift ändert if(eraseFlag==true)//Im Löschzustand { $("#erase").trigger("click" );//Das Klickereignis des Radierers automatisch auslösen, um zum Pinselstatus zurückzukehren } c.StrokeStyle=$(this).val();//Pinselstatus festlegen c.lineWidth=$ (this).val();

});

$("#fontSize").change(function(){//Die Pinselstärke ändert sich if(eraseFlag= =true)//Dasselbe wie oben { $ ("#erase").trigger("click"); c.lineWidth=$(this).val(); c.strokeStyle=$("#color").val (); //eraseFlag=false;

$(".eraseSeries").click( function(){//Die Größe des Radiergummis ändert sich var size= $('input[name="eraseSize"]:checked').val();//Den ausgewählten Wert der Radiergummi-Optionsfeldgruppe abrufen sizeE=size;// Übertragen Sie den Wert an die globale Variable. sizeE muss verwendet werden, um die Position des Radiergummistils zu steuern. c.lineWidth=size; $("#eraseImg").css( {"width" :size "px",height":size "px"} );//Die Größe des Radiergummistils ändert sich });

$("#erase"). toggle(function(){//Das Click-Flip-Ereignis der Gummitaste c.save( );//Behalten Sie den zuletzt festgelegten Status bei eraseFlag=true; c.StrokeStyle="white";

$("#erase").text("Brush");/ /Ändern Sie den Text auf der Schaltfläche $(".eraseSeries").show('fast');//Radiergummi Radiogruppe erscheint // $("#eraseImg").show(); sizeE=5;

},function(){ eraseFlag=false $("#erase").text("Eraser"); $( ".eraseSeries").hide('fast');//Stellen Sie den letzten Pinsel wieder her Zustand (einschließlich Farbe, Dicke usw.)

//setInterval(paint,2>}); p_x;//Letzte Mausposition var p_y; var p_x_now;//Aktuelle momentane Mausposition var p_y_now; var eraseFlag=false; var sizeE;//Eraser size

$(document).mousedown(function(e){//Maus gedrückt Auslöseereignis

// alarm(sizeE); p_x= e.clientX;// Holen Sie sich die Position und legen Sie sie als letzte Mausposition fest p_y= e.clientY;//Brush start flag

}); (function(e){//Mausbewegungs-Triggerereignis if(eraseFlag==true&& e .clientY>30)//Der Radierer ist aktiv und die Position der Maus Y ist größer als 30, d. h. die Maus ist im Zeichenbrett {

//Das Radiergummibild bewegt sich mit der Maus $( "#eraseImg").animate({left: e.clientX-sizeE "px", top: e.clientY-sizeE "px"},0).show('fast'); } else { $("#eraseImg").hide('fast' ); } if(painting==true)//Der Pinsel ist aktiv { / /alert(1); p_x_now= e.clientX;//Mausposition bei der aktuelle Moment p_y_now= e.clientY; c.beginPath();//Startpfad //Kurve Es besteht aus sehr kleinen geraden Linien und die Computerbetriebsgeschwindigkeit ist sehr hoch ist eine Möglichkeit, Kurven iterativ mit geraden Linien zu zeichnen c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop) ;//Zum Startpunkt bewegen c.lineTo(p_x_now- 5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//Zeichne eine gerade Linie vom Startpunkt zum Endpunkt

c.Stroke( ); //Geschlossener Pfad, das ist sehr wichtig, //, solange sich die Leinwandfarbe ändert, ändern sich alle zuvor gemalten Farben p_x = p_x_now;//Nach einer Iteration, der aktuelle Koordinatenwert wird dem letzten Mauskoordinatenwert zugewiesen p_y = p_y_now>}

$( document).mouseup(function(e) {//Mausfreigabe-Triggerereignis

painting=false;//Pinsel einfrieren });

红色 黄色 蓝色 黑色 绿色

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

btn -->