How to make a drawing software similar to windows using html5

I haven’t finished this drawing tool yet, but it has implemented the general structure and common simple graphics drawing functions:

1. It can draw straight lines, circles, rectangles, and regular polygons [Completed]

2. Selection of fill color and stroke color [Completed]

3. Selection of stroke and fill functions [Completed]

Subsequent version:

Eraser, coordinate system, line settings, arrows, other process graphics, cropping and adjustment graphics. . . . .

Ultimate goal:

Process drawing software

I saw a friend leave a message on my blog before and said:

Thank you very much for this friend. Today I finally took the time to complete a very, very small prototype!

Please open the complete prototype code yourself and copy it to local testing.

     
  
 
 
 
形状
 
颜色
 
绘制类型
 
线条宽度
 
橡皮擦
 
 
 
 
 
 
 
线条
 
圆形
 
矩形
 
正多边形
 
箭头
 
 
 
 
 
  
 
  
 
 
 
 
 
描边
 
填充
 
 
 
 
 
小号
 
中号
 
大号
 
  
 
 
 
 
 
  
 
 
 
 
 
   

Regarding process design, the functions to be done in the later stage and the ideas are basically there. Well, Compass is telling the story. If you want to achieve this ultimate goal, complete it. A drawing tool should get you close. Let’s experience the current simple functions first. You can draw pictures normally below. [You need your browser to support canvas.]
Mainly talk about the prototype structure of the target:

1, for the graphics drawing part, I encapsulated a class Shape

function Shape(canvasObj, cxtObj, w, h) { this.oCanvas = canvasObj; this.oGc = cxtObj; this.oCanvas.width = w; this.oCanvas.height = h; this.fillStyle = '#000'; this.storkeStyle = '#000'; this.lineWidth = 1; this.drawType = 'line'; this.paintType = 'stroke'; this.nums = 6; //正多边形的边数 }

canvasObj: It is the canvas object

cxtObj: It is the context drawing environment

w: width of canvas

h: height of canvas

fillStyle: fill color

strokeStyle: stroke color

lineWidth: line width

drawType: The default is to draw a straight line

paintType: two options of stroke/fill (stroke/fill)

2, extend a public method draw on the prototype object To draw graphics

draw method mainly obtains the starting point coordinates (startX, startY) and end point coordinates (endX, endY);

Then call the init method to obtain the drawing status, Drawing specific graphics relies on the following key method:

_this[_this.drawType](startX, startY, endX, endY)

The drawType of this method will change according to the real-time selection of the interface. The drawing type, such as:

_this['line']( startX, startY, endX, endY)

The line in the oShape object is called, the method of drawing a straight line

Shape.prototype = { init: function () { this.oGc.fillStyle = this.fillStyle; this.oGc.strokeStyle = this.strokeStyle; this.oGc.lineWidth = this.lineWidth; }, draw: function () { var _this = this; this.oCanvas.onmousedown = function ( ev ) { _this.init(); var oEvent = ev || event, startX = oEvent.clientX - _this.oCanvas.offsetLeft, startY = oEvent.clientY - _this.oCanvas.offsetTop; _this.oCanvas.onmousemove = function ( ev ) { _this.oGc.clearRect( 0, 0, _this.oCanvas.width, _this.oCanvas.height ); var oEvent = ev || event, endX = oEvent.clientX - _this.oCanvas.offsetLeft, endY = oEvent.clientY - _this.oCanvas.offsetTop; _this[_this.drawType](startX, startY, endX, endY); }; _this.oCanvas.onmouseup = function(){ _this.oCanvas.onmousemove = null; _this.oCanvas.onmouseup = null; } } }, line: function ( x1, y1, x2, y2 ) { this.oGc.beginPath(); this.oGc.moveTo( x1, y1 ); this.oGc.lineTo( x2, y2 ); this.oGc.closePath(); this.oGc.stroke(); }, circle : function( x1, y1, x2, y2 ){ this.oGc.beginPath(); var r = Math.sqrt( Math.pow( x2 - x1, 2 ) + Math.pow( y2 - y1, 2 ) ); this.oGc.arc( x1, y1, r, 0, 2 * Math.PI, false ); this.oGc.closePath(); this.oGc[this.paintType](); }, rect : function( x1, y1, x2, y2 ){ this.oGc.beginPath(); this.oGc.rect( x1, y1, x2 - x1, y2 - y1 ); this.oGc[this.paintType](); }, polygon : function( x1, y1, x2, y2 ){ var angle = 360 / this.nums * Math.PI / 180;//边对应的角的弧度 var r = Math.sqrt( Math.pow( x2 - x1, 2 ) + Math.pow( y2 - y1, 2 ) ); this.oGc.beginPath(); for( var i = 0; i < this.nums; i ++ ){ this.oGc.lineTo( x1 + r * Math.cos( angle * i ), y1 + r * Math.sin( angle * i ) ); } this.oGc.closePath(); this.oGc[this.paintType](); } }

3, the interface operation is very simple, basically the operation of tab + the custom attribute of html5 + the application of classList

The above is the detailed content of How to make a drawing software similar to windows using html5. For more information, please follow other related articles on the PHP Chinese website!