Récemment, j'ai étudié certains nouveaux attributs d'éléments HTML5 et j'ai découvert qu'ils sont vraiment faciles à utiliser, en particulier le nouvel élément de balise Canvas. Introduction officielle : L'API Canvas (canvas) est une nouvelle balise HTML5 utilisée pour générer des images en temps réel sur des pages Web et qui peut manipuler le contenu des images. Fondamentalement, il s'agit d'un bitmap qui peut être manipulé avec JavaScript. Ce qui suit utilise JavaScript combiné avec Canvas pour implémenter une fonction de planche à dessin
Image de démonstration d'effet :
Partie de code (copiez-la directement et utilisez-la)
<!DOCTYPE HTML><html><head> <meta charset=utf-8 /> <title>JavaScript+Canvas implémente une planche à dessin personnalisée</title></head><body><canvas id=canvas width=600 height =300></canvas><script type=text/javascript> var canvas = document.getElementById(canvas); var ctx = canvas.getContext(2d); //Dessinez un rectangle noir ctx.fillStyle=black; ctx.fillRect(0,0,600,300); //Appuyez sur la marque var onoff = false; //Les variables oldx et oldy représentent les coordonnées avant le déplacement de la souris var oldx = -10 ; var oldy = -10; //Définit la couleur var linecolor = white; //Définit la largeur de la ligne var linw = 4; //Ajouter un événement de déplacement de souris canvas.addEventListener(mousemove,draw,true); //Le troisième paramètre est principalement lié à la capture ou au bouillonnement //Ajouter un événement de pression de souris canvas.addEventListener(mousedown,down,false); up event canvas.addEventListener(mouseup,up,false); function down(event){ onoff = true; event.pageY-10; //console.log(event.pageX+'............000.............'+event.pageY) ; /event.pageX et event.pageY sont relatifs à la position de la souris sur la page entière, y compris la partie de débordement (c'est-à-dire la barre de défilement) } function up(){ onoff = false } function draw(event){ if(onoff; == vrai) { var newx = event.pageX-10 ; event.pageY-10; ctx.beginPath();//beginPath() Supprime tout chemin actuellement défini et en démarre un nouveau. Il définit le point actuel sur (0,0). ctx.moveTo(oldx,oldy); //Se déplace vers la coordonnée lorsque vous cliquez dessus, avec cette coordonnée comme origine ctx.lineTo(newx,newy); //Dessine un nouveau chemin ctx.strokeStyle=linecolor; ; ctx.lineCap=round; ctx.Stroke();//La méthode Stroke() tracera en fait le chemin défini par les méthodes moveTo() et lineTo(). La couleur par défaut est le noir. //Attribue la nouvelle position de la souris à la coordonnée de départ du prochain dessin start oldx = newx; oldy = newy };</script></body></html>Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.