Use canvas to design a simple drawing board

I talked about some of the basic knowledge of canvasAPI before. Just looking at the introduction of the API is really boring. I need something that can inspire my inner passion to motivate myself to learn, so I created a small example to accompany the learning of canvasAPI, like this Through the knowledge of API and the application of small examples, you can better understand these properties and methods of canvas, and you can also inspire your own inspiration and feeling to create canvas special effects. Well, please call me Lei Feng. , you’re welcome! The small example brought to you below is very simple. It is a simple drawing tool. Let’s take a look at the effect first!

Let me describe the effect first: there is a canvas and several buttons. The canvas is a drawing board that can draw any graphics. The button can set the brush color of the drawing board. , you can also clear the artboard. Of course, if you want to draw a unique painting, please right-click and save the picture as, you know!

How is this done?

I will explain the principle first and then post the code to make it easier for everyone to understand. I have already done this, so don’t just use it as a doctrine!

The principle is actually very simple. The core methods used here are lineTo() and stroke(). Students who have read the previous API articles should understand what they mean, which is to draw a line.

When in the canvas, if the mouse is pressed, we place the starting point of the canvas at the position of the mouse at this time, using moveTo(), and then when the mouse moves, use lineTo() to draw the path and stroke() To fill the path, move it and draw it, so that you can draw a curve. When the mouse is raised, we only need to cancel the mouse action. If you have seen the mouse drag effect I wrote, does it feel very weird? Like, yes, the idea is similar to drag and drop, but the specific content is different. If you haven’t seen the drag and drop effect of the mouse, you can look here

Mouse Drag

#Because the buttons below each control different things, I used a switch method to add effects to each. The canvas attribute used to set the color is strokeStyle, the method of clearing the canvas is not mentioned in the API. It may be omitted. Let’s talk about it here. The clearRect() method is used here, so let’s talk about it:

clearRect(x,y,w,h) clears the specified pixel in the given rectangle

Parameters: x,y represents the coordinates of the upper left corner of the rectangle to be cleared, w,h represents the Width and height of the cleared rectangle

Seeing this parameter, we can understand that it can clear the content of part of the canvas, or the content of the entire canvas, depending on how large an area you give. This example is Clear the entire canvas, because we need to clear the entire canvas. If you only want to clear the piece you don’t want, you can set a precise area. I won’t go into details here!

The general principle is that simple. I posted the code for your reference and understanding. By the way, I posted the effect address to experience it. Without further ado, look at the code:

css:

*{ padding:0; margin:0;}body{ background:#ccc;}canvas{ background:#fff; margin:50px 10px; }input{ display:inline-block; width:80px; height:30px; cursor:pointer; margin-left:10px;}

html:

 <canvas width="500" height="500" id="canvas">
        <span>亲，您的浏览器不支持canvas，换个浏览器试试吧！</span>
    </canvas>
    <p>
        <input type="button" value="红画笔" id="red">
        <input type="button" value="绿画笔" id="green">
        <input type="button" value="蓝画笔" id="blue">
        <input type="button" value="重置颜色" id="default">
        <input type="button" value="清除画布" id="clear">
    </p>

js:

window.onload = function(){        var canvas = document.getElementById("canvas");        var ctx = canvas.getContext("2d");        var oInput = document.getElementsByTagName("input");        for(var i=0;i<oInput.length;i++){
            oInput[i].onclick = function(){                var ID = this.getAttribute('id');                switch(ID){                    case 'red':
                        ctx.strokeStyle = 'red';                        break;                    case 'green':
                        ctx.strokeStyle = 'green';                        break;                    case 'blue':
                        ctx.strokeStyle = 'blue';                        break;                    case 'default':
                        ctx.strokeStyle = 'black';                        break;                    case 'clear':
                        ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);                        break;    
                }    
            }    
        }
        draw();        function draw(){
            canvas.onmousedown = function(ev){                var ev = ev || event;
                ctx.beginPath();
                ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
                document.onmousemove = function(ev){                    var ev = ev || event;
                    ctx.lineTo(ev.clientX - canvas.offsetLeft,ev.clientY - canvas.offsetTop);
                    ctx.stroke();    
                }
                document.onmouseup = function(ev){
                    document.onmousemove = document.onmouseup = null;
                    ctx.closePath();
                }
                
            }
        }
        
        
        
    }

Oh, here it is One detail I forgot to explain is that path closure must be added to the drawing part, that is, beginPath() and closePath(). Why? Because every time after the mouse is raised, when switching the following style or clearing the canvas, if the path is not closed, then the subsequent operations will pollute the previously drawn things. For example, the previous drawing was painted in red, and now I switch to green. Both the current painting and the original painting have turned green. For example, if the canvas is cleared after painting once, and then the first painting comes out again when painting again, this is not what we want, so this point needs to be Remember!

Please see here for the effect demonstration:

Small example of canvas drawing boardI will learn more about it later I bring more small examples for your reference. The writing is not very good, so I hope you don’t dislike it. I also hope that everyone will pay more attention to me. This is my biggest motivation, haha!

That’s about it, thank you everyone!

The above is the detailed content of Use canvas to design a simple drawing board. For more information, please follow other related articles on the PHP Chinese website!