Graffiti board is simply implemented to write your own drawing board in Html5-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Graffiti board is simply implemented to write your own drawing board in Html5

巴扎黑

May 21, 2017 pm 02:46 PM

html5 drawing board

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.

Let’s start with the code:

html

XML/HTML CodeCopy the content to the clipboard

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

Copy after login

Effect:

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

JavaScript CodeCopy content to clipboard

$.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();   
}     
})

Copy after login

I believe everyone can understand the simple code here, the main thing is to create a Object, including creating canvas, creating 2D object, drawing circle method, and object initialization method.

Go to the front html page to call this object/p>

Look at the code:

JavaScript CodeCopy the content to the clipboard

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);   
  }    
 }   
 }

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, stored for the following line drawing

2. Initialize the drawing object

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

Okay, a simple graffiti board will be fine, with my calligraphy on it:

The above is the detailed content of Graffiti board is simply implemented to write your own drawing board in Html5. 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