Html5 simply implements the sample code of graffiti board-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Html5 simply implements the sample code of graffiti board

Mar 16, 2017 pm 01:17 PM

code Graffiti

This article mainly teaches you how to use Html5 to write your own drawing board, perform painting, color adjustment and other operations. Interested friends can refer to it

Recently learned about the powerful drawing function of html5 It surprised me, so I wrote a gadget---a graffiti pad, which can perform functions such as: drawing, changing colors, and adjusting the brush size.

html5 drawing can be divided into points, lines, surfaces, circles, Pictures, etc., points and lines, these are the basic points of all plane effects. With these two things, there is nothing that cannot be drawn, only unexpected algorithms.

First upload the code:

html

&lt;body style=&quot;cursor:pointer&quot;&gt;  
 &lt;canvas id=&quot;mycavas&quot; width=&quot;1024&quot; height=&quot;400&quot; style=&quot;border:solid 4px #000000&quot;&gt;&lt;/canvas&gt;&lt;!--画布--&gt;  
        &lt;input type=&quot;color&quot; id=&quot;color1&quot; name=&quot;color1&quot;/&gt;&lt;!--设色器--&gt;  
        &lt;output name=&quot;a&quot; for=&quot;color1&quot; onforminput=&quot;innerHTML=color1.value&quot;&gt;&lt;/output&gt;  
         &lt;input type=&quot;range&quot; name=&quot;points&quot; id=&quot;size&quot; min=&quot;5&quot; max=&quot;20&quot; /&gt;&lt;!--拖动条--&gt;  
&lt;/body&gt;

Copy after login

Effect:

Html5 simply implements the sample code of graffiti board

Okay , a simple drawing interface is ready. Let’s start writing some line drawing code

$.Draw = {};   
$.extend($.Draw, {   
    D2: &quot;&quot;,   
    CX:&quot;&quot;,   
    Box: &quot;mycavas&quot;,//画布id   
    BoxObj:function(){//画布对象   
        this.CX=document.getElementById(this.Box);   
    },   
    D2:function(){//2d绘图对象   
       this.D2 = this.CX.getContext(&quot;2d&quot;);   
    },   
    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();   
    }   
  
})

Copy after login

I believe everyone can understand the simple code here. It mainly creates an object, including creating a canvas and creating 2d. Object, circle drawing method, and object initialization method.

Next, go to the front html page to call this object/p>

Look at the code:

var color = &quot;#000000&quot;;//初始化颜色   
        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 &gt;= 0) {   
                    $.Draw.Cricle(option.x, option.y, size, color);   
                }    
            }   
        }

Copy after login

This code mainly has the following meanings

1. Capture the change event of the color space and drag bar control to obtain the corresponding color and size values, and store them for the following line drawing

2. Initialize the drawing object

3. Capture the mouse press, lift and move events. The key is that a switch can control the ink

Okay, a simple graffiti pad will be enough, with my calligraphy on it:

Html5 simply implements the sample code of graffiti board

6 hand-drawn graffiti button effects based on pure CSS3

How to use html5 Complete google graffiti animation with css3

Implement adjustable brush color/thickness/eraser graffiti board based on javascript html5 canvas

The above is the detailed content of Html5 simply implements the sample code of graffiti board. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn