suchen

Heim  >  Artikel  >  Web-Frontend  >  Graffiti-Board wird einfach implementiert, um Ihr eigenes Zeichenbrett in HTML5 zu schreiben

Graffiti-Board wird einfach implementiert, um Ihr eigenes Zeichenbrett in HTML5 zu schreiben

巴扎黑
巴扎黑Original
2017-05-21 14:46:404330Durchsuche

In diesem Artikel erfahren Sie hauptsächlich, wie Sie mit HTML5 Ihr eigenes Zeichenbrett schreiben, malen, Farben anpassen und andere Vorgänge ausführen.

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

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

Beginnen wir mit dem Code:

html

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<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:

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

JavaScript-CodeInhalt in die Zwischenablage kopieren

$.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, dass jeder den einfachen Code hier verstehen kann, hauptsächlich Es geht darum, ein Objekt zu erstellen, Dazu gehören das Erstellen einer Leinwand, das Erstellen eines 2D-Objekts, die Methode zum Zeichnen eines Kreises und die Methode zur Objektinitialisierung.

Neben der vorderen HTML-Seite zum Aufrufen dieses Objekts/p>

Sehen Sie sich den Code an:

JavaScript-CodeKopieren Sie den Inhalt in die Zwischenablage 

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 hat hauptsächlich die folgende Bedeutung

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

2 Initialisieren Sie das Zeichenobjekt

3 Die Taste ist a Schalter. Kontrollieren Sie die Tinte

Okay, ein einfaches Graffiti-Pad reicht aus, fügen Sie meine Kalligraphie hinzu:

Das obige ist der detaillierte Inhalt vonGraffiti-Board wird einfach implementiert, um Ihr eigenes Zeichenbrett in HTML5 zu schreiben. 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：Einführung in die Implementierung des lokalen Speichers durch PhonegapNächster Artikel：Einführung in die Implementierung des lokalen Speichers durch Phonegap

In Verbindung stehende Artikel

Mehr sehen