Html5 implémente simplement l'exemple de code du tableau graffiti-Tutoriel H5-php.cn

Html5 implémente simplement l'exemple de code du tableau graffiti

黄舟

Libérer： 2017-03-16 13:17:32

original

3771 Les gens l'ont consulté

Cet article vous apprend principalement à utiliser Html5 pour écrire votre propre planche à dessin, effectuer de la peinture, ajuster les couleurs et d'autres opérations. Les amis intéressés peuvent se référer à

J'ai récemment découvert la puissante fonction de dessin de HTML5. moi, alors j'ai écrit un gadget --- un bloc de graffitis, qui peut remplir des fonctions telles que : dessiner, changer les couleurs et ajuster la taille du pinceau

Le dessin HTML5 peut être divisé en points, lignes, surfaces, cercles , Images, etc., points et lignes, ce sont les points fondamentaux de tous les effets plans. Avec ces deux choses, il n'y a rien qui ne puisse être dessiné, seulement des algorithmes inattendus.

Commençons par le code :

html

<body style="cursor:pointer">  
 <canvas id="mycavas" width="1024" height="400" style="border:solid 4px #000000"></canvas><!--画布-->  
        <input type="color" id="color1" name="color1"/><!--设色器-->  
        <output name="a" for="color1" onforminput="innerHTML=color1.value"></output>  
         <input type="range" name="points" id="size" min="5" max="20" /><!--拖动条-->  
</body>

Copier après la connexion

Effet :

Html5 implémente simplement l'exemple de code du tableau graffiti

D'accord, une interface de dessin simple est prête. Commençons à écrire du code de dessin au trait

$.Draw = {};   
$.extend($.Draw, {   
    D2: "",   
    CX:"",   
    Box: "mycavas",//画布id   
    BoxObj:function(){//画布对象   
        this.CX=document.getElementById(this.Box);   
    },   
    D2:function(){//2d绘图对象   
       this.D2 = this.CX.getContext("2d");   
    },   
    Cricle: function (x, y, r, color) {//画圆   
        if (this.D2) {   
            this.D2.beginPath();   
            this.D2.arc(x, y, r, 0, Math.PI * 2, true);   
            this.D2.closePath();   
            if (color) {   
                this.D2.fillStyle = color;   
            }   
            this.D2.fill();   
        }   
    },   
    init: function () {//初始化   
        this.BoxObj();   
        this.D2();   
    }   
  
})

Copier après la connexion

Je pense que tout le monde peut comprendre le code simple ici. Il crée principalement un objet, y compris la création de Canvas, la création d'objets 2D, méthodes de dessin de cercles et méthodes d'initialisation d'objets.

Ensuite, allez sur la page d'accueil html pour appeler cet objet/p>

Regardez le code :

var color = "#000000";//初始化颜色   
        var size = 5;//初始化尺寸   
        document.getElementById(&#39;color1&#39;).onchange = function () {   
            color = this.value;   
        };   
        document.getElementById(&#39;size&#39;).onchange = function () {   
            size = this.value;   
        };   
        $.Draw.init();//初始化   
        var tag = false;//控制鼠标当前状态并起到开启油墨开关的作用   
        var current = {};//存储鼠标按下时候的点   
        document.onmousedown = function (option) {//鼠标按下事件   
            current.x = option.x;   
            current.y = option.y;   
            $.Draw.Cricle(option.x, option.y, size, color);   
            tag = true;   
        }   
        document.onmouseup = function () {//鼠标抬起事件   
            tag = false;   
        }   
        document.onmousemove = function (option) {//鼠标移动事件   
            if (tag) {   
                if (size >= 0) {   
                    $.Draw.Cricle(option.x, option.y, size, color);   
                }    
            }   
        }

Copier après la connexion

Ce code contient principalement ce qui suit significations

1. Capturez l'événement de changement de l'espace colorimétrique et faites glisser le contrôle de la barre pour obtenir les valeurs de couleur et de taille correspondantes, et stockez-les pour le dessin de ligne suivant

2. l'objet de dessin

3. Capturez les événements de pression, de levage et de déplacement de la souris. La clé est de contrôler l'encre avec un interrupteur

D'accord, un simple tampon graffiti fera l'affaire pour ma calligraphie. :

Html5 implémente simplement l'exemple de code du tableau graffiti