Sample code to create a drawing program using HTML5 canvas and JavaScript-H5 Tutorial-php.cn

Sample code to create a drawing program using HTML5 canvas and JavaScript

黄舟

Release： 2017-03-18 16:16:17

Original

2180 people have browsed it

The following editor will bring you a simple example of creating a drawing program using html5 canvas and JavaScript . The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

This article will guide you to create a simple drawing program using canvas and JavaScript.

First prepare the container Canvas element, and then everything will be done in JavaScript.

XML/HTML Code复制内容到剪贴板
<canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>

Copy after login

Get the drawing environment, the context object provides methods and properties for drawing on the canvas

context = document.getElementById(&#39;canvasInAPerfectWorld&#39;).getContext("2d");

Copy after login

Start the drawing process

First we need to store the drawing path point coordinates. The addClick function adds the coordinate point value to the array.

var clickX = new Array();   
var clickY = new Array();   
var clickDrag = new Array();//存储路径点 
var paint;//是否绘制，mousedown时置为true 
function addClick(x, y, dragging)   
{   
  clickX.push(x);   
  clickY.push(y);   
  clickDrag.push(dragging);   
}

Copy after login

The redraw function will redraw the entire canvas every time it is called. First, we clear the content on the canvas and set the line color, thickness, and line connection method. Then

Draw a path between the two points, and draw the coordinate points in the array in sequence

function redraw(){   
  context.clearRect(0, 0, context.canvas.width,   context.canvas.height); // 清除画布内容   
  context.strokeStyle = "#df4b26";//设置线条颜色   
  context.lineJoin = "round";//当两条线条交汇时，创建圆形边角   
  context.lineWidth = 5;//线条粗细   
  for(var i=0; i < clickX.length; i++) {           
    context.beginPath();//开始一条路径，或重置当前的路径   
    if(clickDrag[i] && i){   
      context.moveTo(clickX[i-1], clickY[i-1]);   
     }else{   
       context.moveTo(clickX[i]-1, clickY[i]);   
     }   
     context.lineTo(clickX[i], clickY[i]);   
     context.closePath();   
     context.stroke();//绘制路径   
  }   
}

Copy after login

Events required for the drawing process

1 mousedown event

When drawing this click on the canvas, the execution of this event will be triggered. The addClick function is called and paint is set to true.

$(&#39;#canvas&#39;).mousedown(function(e){   
  var mouseX = e.pageX - this.offsetLeft;   
  var mouseY = e.pageY - this.offsetTop;   
  paint = true;   
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);   
  redraw();   
});

Copy after login

##2 mousemove event

After the paint set in mousedown is true, the mousemove event execution is triggered when the mouse moves, all points moved by the mouse are recorded, and redraw is continuously called to redraw the canvas.

$(&#39;#canvas&#39;).mousemove(function(e){   
   if(paint){   
     addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);   
     redraw();   
   }   
 });

Copy after login

3 mouseup event

mouseup Click and release the mouse or drag and release, indicating that the path is drawn. Set paint to false.

$(&#39;#canvas&#39;).mouseup(function(e){   
   paint = false;   
 });

Copy after login

4 mouseleave event

mouseleaveThe mouse leaves the canvas element and sets paint to false.

$(&#39;#canvas&#39;).mouseleave(function(e){   
  paint = false;   
});

Copy after login

The above is the detailed content of Sample code to create a drawing program using HTML5 canvas and JavaScript. For more information, please follow other related articles on the PHP Chinese website!