Utilisez une toile pour concevoir une simple planche à dessin

J'ai déjà parlé de certaines connaissances de base de CanvasAPI. Le simple fait de regarder l'introduction de l'API est vraiment ennuyeux. J'ai besoin de quelque chose qui puisse inspirer ma passion intérieure pour me motiver à apprendre, j'ai donc créé un petit exemple pour accompagner. l'apprentissage de CanvasAPI, comme celui-ci Grâce à la connaissance de l'API et à l'application de petits exemples, vous pouvez mieux comprendre ces propriétés et méthodes de Canvas, et vous pouvez également inspirer votre propre inspiration et vos propres sentiments pour créer une toile spéciale effets Eh bien, s'il vous plaît, appelez-moi Lei Feng, de rien !

Le petit exemple présenté ci-dessous est très simple. Il s’agit d’un outil de dessin simple. Jetons d’abord un coup d’œil à l’effet !

Laissez-moi d'abord décrire l'effet : il y a une toile et plusieurs boutons. La toile est une planche à dessin qui peut dessiner n'importe quel graphique. Le bouton peut définir la couleur du pinceau. la planche à dessin. , vous pouvez également effacer le plan de travail. Bien sûr, si vous souhaitez dessiner une peinture unique, veuillez cliquer avec le bouton droit et enregistrer l'image sous, vous savez !

Alors, comment ça se passe ?

Je vais d'abord expliquer le principe et publier le code pour que tout le monde comprenne plus facilement. Je l'ai déjà fait, alors ne l'utilisez pas directement !

Le principe est en fait très simple. Les méthodes de base utilisées ici sont lineTo() et Stroke(). Les étudiants qui ont lu les articles précédents sur l'API doivent comprendre ce qu'ils signifient, c'est-à-dire tracer une ligne

.

Dans le canevas, si la souris est enfoncée, nous plaçons le point de départ du canevas à la position de la souris à ce moment-là, en utilisant moveTo(), puis lorsque la souris bouge, utilisons lineTo() pour dessiner le chemin et Stroke() Pour remplir le chemin, déplacez-le et dessinez-le, afin de pouvoir dessiner une courbe lorsque la souris est levée, il suffit d'annuler l'action de la souris. Si vous avez vu l'effet de glissement de la souris que j'ai écrit. , est-ce que cela semble très étrange ? Comme, oui, l'idée est similaire au glisser, mais le contenu spécifique est différent Si vous n'avez pas vu l'effet de glissement de la souris, vous pouvez regarder iciGlisser la souris.

Étant donné que chacun des boutons ci-dessous contrôle des choses différentes, j'ai utilisé une méthode de commutation pour ajouter des effets à chacun. définissez la couleur sur StrokeStyle, la méthode d'effacement du canevas n'est pas mentionnée dans l'API. Parlons-en ici. La méthode clearRect() est utilisée ici :

.

clearRect(x,y,w,h) efface le pixel spécifié dans le rectangle donné

Paramètres : x, y représente les coordonnées du coin supérieur gauche du rectangle à être effacé, w, h représente les coordonnées du coin supérieur gauche du rectangle à effacer Largeur et hauteur du rectangle effacé

En voyant ce paramètre, on peut comprendre qu'il peut effacer le contenu du canevas local ou la totalité du canevas, selon la taille de la zone que vous donnez. Cet exemple est Effacer tout le canevas, car nous devons effacer tout le canevas. Si vous souhaitez uniquement effacer la partie que vous ne voulez pas, vous pouvez définir une valeur précise. domaine. Je n'entrerai pas dans les détails ici !

Le principe général est aussi simple que cela. J'ai posté le code pour que tout le monde puisse s'y référer et le comprendre. D'ailleurs, j'ai posté l'adresse de l'effet pour en faire l'expérience. Sans plus tarder, regardez le code :

css:

*{ padding:0; margin:0;}body{ background:#ccc;}canvas{ background:#fff; margin:50px 10px; }input{ display:inline-block; width:80px; height:30px; cursor:pointer; margin-left:10px;}

html:

 <canvas width="500" height="500" id="canvas">
        <span>亲，您的浏览器不支持canvas，换个浏览器试试吧！</span>
    </canvas>
    <p>
        <input type="button" value="红画笔" id="red">
        <input type="button" value="绿画笔" id="green">
        <input type="button" value="蓝画笔" id="blue">
        <input type="button" value="重置颜色" id="default">
        <input type="button" value="清除画布" id="clear">
    </p>

js:

window.onload = function(){        var canvas = document.getElementById("canvas");        var ctx = canvas.getContext("2d");        var oInput = document.getElementsByTagName("input");        for(var i=0;i<oInput.length;i++){
            oInput[i].onclick = function(){                var ID = this.getAttribute('id');                switch(ID){                    case 'red':
                        ctx.strokeStyle = 'red';                        break;                    case 'green':
                        ctx.strokeStyle = 'green';                        break;                    case 'blue':
                        ctx.strokeStyle = 'blue';                        break;                    case 'default':
                        ctx.strokeStyle = 'black';                        break;                    case 'clear':
                        ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);                        break;    
                }    
            }    
        }
        draw();        function draw(){
            canvas.onmousedown = function(ev){                var ev = ev || event;
                ctx.beginPath();
                ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
                document.onmousemove = function(ev){                    var ev = ev || event;
                    ctx.lineTo(ev.clientX - canvas.offsetLeft,ev.clientY - canvas.offsetTop);
                    ctx.stroke();    
                }
                document.onmouseup = function(ev){
                    document.onmousemove = document.onmouseup = null;
                    ctx.closePath();
                }
                
            }
        }
        
        
        
    }

Oh, un détail que j'ai oublié d'expliquer ici est que la fermeture du chemin doit être ajoutée à la partie dessin, c'est-à-dire startPath() et closePath() Pourquoi ? Parce qu'à chaque fois que la souris est levée, lors du changement de style suivant ou de l'effacement du canevas, si le chemin n'est pas fermé, les opérations ultérieures pollueront les éléments dessinés précédemment. Par exemple, le dessin précédent a été peint en rouge, et maintenant. Je passe au vert. La peinture actuelle et la peinture originale sont devenues vertes. Par exemple, si la toile est effacée après avoir peint une fois, puis que la première peinture ressort lorsque l'on peint à nouveau, ce n'est pas ce que nous voulons, donc ceci. le point doit être Rappelez-vous!

Veuillez voir ici pour la démonstration de l'effet :

Petit exemple de planche à dessin sur toile

I j'en apprendrai plus plus tard, j'apporte d'autres petits exemples pour votre référence. L'écriture n'est pas très bonne, donc j'espère que vous ne l'aimerez pas. J'espère aussi que tout le monde me prêtera plus d'attention. haha!

C'est tout, merci à tous !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!