Heim > Artikel > Web-Frontend > HTML5 implementiert einfach den Beispielcode des Graffiti-Boards

HTML5 implementiert einfach den Beispielcode des Graffiti-Boards

黄舟Original: 2017-03-16 13:17:323727Durchsuche

In diesem Artikel erfahren Sie hauptsächlich, wie Sie mit HTML5 Ihr eigenes Zeichenbrett schreiben, Malen, Farbanpassungen und andere Vorgänge durchführen.

Kürzlich von der leistungsstarken Zeichenfunktion von HTML5 erfahren Es überrascht Ich habe also ein Gadget geschrieben – ein Graffiti-Pad, das folgende Funktionen ausführen kann: Zeichnen, Farben ändern und Pinselgröße anpassen

HTML5-Zeichnung kann in Punkte, Linien, Flächen usw. unterteilt werden Kreise. Bilder usw., Punkte und Linien, das sind die Grundpunkte aller Ebeneneffekte. Bei diesen beiden Dingen gibt es nichts, was nicht gezeichnet werden kann, nur unerwartete Algorithmen.

Beginnen wir mit dem 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>

Effekt:

HTML5 implementiert einfach den Beispielcode des Graffiti-Boards

Okay, eine einfache Zeichenoberfläche ist fertig. Beginnen wir mit dem Schreiben von Strichzeichnungscode

$.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();   
    }   
  
})

Ich glaube, jeder kann den einfachen Code hier verstehen. Er erstellt hauptsächlich ein Objekt, einschließlich der Erstellung von Canvas, der Erstellung von 2D-Objekten. Kreiszeichnungsmethoden und Objektinitialisierungsmethoden.

Als nächstes gehen Sie zur Frontend-HTML-Seite, um dieses Objekt/p> aufzurufen.

Sehen Sie sich den Code an:

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);   
                }    
            }   
        }

Dieser Code enthält hauptsächlich Folgendes Bedeutungen

1. Erfassen Sie das Änderungsereignis des Farbraums und ziehen Sie die Balkensteuerung, um die entsprechenden Farb- und Größenwerte zu erhalten, und speichern Sie sie für die folgende Strichzeichnung

2 das Zeichenobjekt

3. Erfassen Sie das Drücken, Heben und Bewegen der Maus. Der Schlüssel liegt darin, die Tinte mit einem Schalter zu steuern

Okay, ein einfaches Graffiti-Pad reicht für meine Kalligraphie aus :

HTML5 implementiert einfach den Beispielcode des Graffiti-Boards

Verwandte Artikel:

6 Arten handgezeichneter Graffiti-Button-Effekte basierend auf reinem CSS3

So verwenden Sie HTML5 und CSS3, um die Google-Graffiti-Animation zu vervollständigen

Realisieren Sie das Graffiti-Board mit einstellbarer Pinselfarbe/-stärke/Radiergummi basierend auf der Javascript-HTML5-Leinwand

Das obige ist der detaillierte Inhalt vonHTML5 implementiert einfach den Beispielcode des Graffiti-Boards. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung des Beispielcodes zum Zeichnen eines Rechtecks in der HTML5-Canvas-GrundzeichnungNächster Artikel：Ausführliche Erläuterung des Beispielcodes zum Zeichnen eines Rechtecks in der HTML5-Canvas-Grundzeichnung

In Verbindung stehende Artikel

Mehr sehen