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>
Effet :
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(); } })
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('color1').onchange = function () { color = this.value; }; document.getElementById('size').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); } } }
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. :
Articles connexes :
6 types d'effets de boutons de graffitis dessinés à la main basés sur du CSS3 pur
Comment utiliser HTML5 et CSS3 pour compléter l'animation de graffitis Google
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!