Graffiti Board est simplement implémenté pour écrire votre propre planche à dessin en HTML5-Tutoriel H5-php.cn

Graffiti Board est simplement implémenté pour écrire votre propre planche à dessin en HTML5

巴扎黑

Libérer： 2017-05-21 14:46:40

original

4319 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

Code XML/HTMLCopier le contenu dans le presse-papiers

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

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

Code JavaScriptCopier le contenu dans le presse-papiers

$.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 crois que tout le monde peut comprendre le code simple ici, principalement Il s'agit de créer un objet, y compris la création d'un canevas, la création d'un objet 2D, la méthode de dessin d'un cercle et la méthode d'initialisation d'objet.

À côté de la première page html pour appeler cet objet/p>

Regardez le code :

Code JavaScriptCopiez le contenu dans le presse-papiers

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 a principalement les significations suivantes

1 Capturez l'événement de changement de l'espace colorimétrique et faites glisser le contrôle de la barre pour l'obtenir. les valeurs de couleur et de taille correspondantes sont stockées pour le dessin au trait suivant

2. Initialisez l'objet de dessin

3. Capturez les événements de pression, de levage et de déplacement de la souris. switch. Contrôlez l'encre

Bon, un simple tampon graffiti fera l'affaire, ajoutez ma calligraphie :