I would like to try to make a web version of the beauty show, which can import the image for processing, and make some templates to quickly generate the character's expression packages, but doing it, found that it took too much time. The result is a simple canvas-based sketchpad.
github address: https://github.com/linhongbijkm/canvasPainter
Online DEMO: https://linhongbijkm.github.io/canvasPainter/cvs.html
Simply realizing canvas painting function is still relatively simple. I will just talk about the realization of painting function. As for the page also includes color selector and image saving to local function, please download it from github code warehouse.
I. canvas Label
This tag defines a canvas, and then uses JavaScript to call the browser API to draw on the canvas, so the first step is to add the canvas tag to the page.
<body> <canvas id="canvas" width="800px" height="600px"></canvas> </body>
2. Reading Canvas
Like other elements acquired by JS, according to the id value defined by the canvas tag, canvas elements are selected by native function, then getContext('2d') is called to acquire the canvas environment object, and then the API s for canvas drawing are all called by the environment object.
<script>
var canvas = document.getElementById('canvas');
var cvs = canvas.getContext('2d');
</script>3. Define the color and thickness of the brush
var penWeight = 1; //Brush thickness var penColor = '#f00'; //brush color
IV. Monitor the event when the mouse clicks
With a mouse click, a painting begins. The starting point of the brush is the current mouse position, and the attributes of the brush are set.
canvas.onmousedown = function(e){
/*Find the coordinates of the mouse (brush)*/
var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
cvs.beginPath(); //Start this painting
cvs.moveTo(start_x, start_y); //Brush Starting Point
/*Setting Brush Properties*/
cvs.lineCap = 'round';
cvs.lineJoin ="round";
cvs.strokeStyle = penColor; //stroke color
cvs.lineWidth = penWeight; //Brush thickness
/*Monitor mouse movement events*/
/*Monitor mouse release events*/
}5. Monitoring Mouse Mobility and Release Events
In order to save performance, when the mouse is released, the monitoring of mouse holding and moving is cancelled, that is, only when the mouse is pressed, the monitoring of mouse moving and loosening events is carried out.
canvas.onmousemove = function(e){
/*Find the coordinates of the mouse (brush)*/
var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
cvs.lineTo(move_x, move_y); //Drawing by Mouse Path
cvs.stroke(); //immediate rendering
}
canvas.onmouseup = function(e){
cvs.closePath(); //End the painting
canvas.onmousemove = null;
canvas.onmouseup = null;
}Integrating the above five points, the code of simple drawing function is as follows:
(Note: It does not include color selection, eraser, empty canvas function. If you need a full version, download it at github, the address is at the top of this article.
<body>
<canvas id="canvas" width="800px" height="600px"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var cvs = canvas.getContext('2d');
var penWeight = 1; //Brush thickness
var penColor = '#f00'; //brush color
canvas.onmousedown = function(e){
/*Find the coordinates of the mouse (brush)*/
var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
cvs.beginPath(); //Start this painting
cvs.moveTo(start_x, start_y); //Brush Starting Point
/*Setting Brush Properties*/
cvs.lineCap = 'round';
cvs.lineJoin ="round";
cvs.strokeStyle = penColor; //stroke color
cvs.lineWidth = penWeight; //Brush thickness
canvas.onmousemove = function(e){
/*Find the coordinates of the mouse (brush)*/
var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
cvs.lineTo(move_x, move_y); //Drawing by Mouse Path
cvs.stroke(); //immediate rendering
}
canvas.onmouseup = function(e){
cvs.closePath(); //End the painting
canvas.onmousemove = null;
canvas.onmouseup = null;
}
}
</script>
