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

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

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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