灵空123456 | 码农工具

​x
 
<!DOCTYPE HTML>
<html>
    <body>
        <div id='colors'>
            <button id='black' onclick='changeColor("black")' ontouchstart='changeColor("black")'></button>
            <button id='red' onclick='changeColor("red")' ontouchstart='changeColor("red")'></button>
            <button id='green' onclick='changeColor("green")' ontouchstart='changeColor("green")'></button>
            <button id='blue' onclick='changeColor("blue")' ontouchstart='changeColor("blue")'></button>
            <button id='orange' onclick='changeColor("orange")' ontouchstart='changeColor("orange")'></button>
            <button id='pink' onclick='changeColor("pink")' ontouchstart='changeColor("pink")'></button>
        </div>
        <canvas id='canvas' width='300' height='200'></canvas>
        <div>
            <button onclick='clearCanvas()'>Clear</button>
        </div>
    </body>
</html>

HTML

xxxxxxxxxx
 
var arr_touches = [];
​
var canvas;
​
var ctx;
​
var down = false; //mouse is pressed
​
var color = 'black'; //default drawing color
​
var width = 5; // drawing width
​
​
​
​
​
//calling window.onload to make sure the HTML is loaded
​
window.onload = function() {
​
    canvas = document.getElementById('canvas');
​
    ctx = canvas.getContext('2d'); 
​
    ctx.lineWidth = width;
​
    
​
    //handling mouse click and move events
​
    canvas.addEventListener('mousemove', handleMove); 
​
    canvas.addEventListener('mousedown', handleDown);
​
    canvas.addEventListener('mouseup', handleUp);
​
    
​
    //handling mobile touch events
​
    canvas.addEventListener("touchstart", handleStart, false);
​
    canvas.addEventListener("touchend", handleEnd, false);
​
    canvas.addEventListener("touchcancel", handleCancel, false);
​
    canvas.addEventListener("touchleave", handleEnd, false);
​
    canvas.addEventListener("touchmove", handleTouchMove, false);
​
};
​
function handleMove(e)
​
{
​
    xPos = e.clientX-canvas.offsetLeft;
​
    yPos = e.clientY-canvas.offsetTop;
​
    if(down == true)
​
    {
​
        ctx.lineTo(xPos,yPos); //create a line from old point to new one
​
        ctx.strokeStyle = color;
​
        ctx.stroke();
​
    }
​
}
​
function handleDown() 
​
{
​
    down = true;
​
    ctx.beginPath();
​
    ctx.moveTo(xPos, yPos);
​
}
​
function handleUp() 
​
{
​
    down = false;
​
}
​
function handleStart(evt) 
​
{
​
    var touches = evt.changedTouches;
​
    for(var i = 0; i < touches.length; i++) 
​
    {
​
        if(isValidTouch(touches[i])) 
​
        {
​
            evt.preventDefault();
​
            arr_touches.push(copyTouch(touches[i]));
​
            ctx.beginPath();
​
            ctx.fillStyle = color;
​
            ctx.fill();
​
        }
​
    }
​
}
​
function handleTouchMove(evt) 
​
{
​
    var touches = evt.changedTouches;
​
    var offset = findPos(canvas);
​
    for (var i = 0; i < touches.length; i++) 
​
    {
​
        if(isValidTouch(touches[i])) 
​
        {
​
            evt.preventDefault();
​
            var idx = ongoingTouchIndexById(touches[i].identifier);
​
            if (idx >= 0) 
​
            {
​
                ctx.beginPath();
​
                ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y);
​
                ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
​
                ctx.strokeStyle = color;
​
                ctx.stroke();
​
                
​
                arr_touches.splice(idx, 1, copyTouch(touches[i]));
​
            }   
​
        }
​
    }
​
}
​
function handleEnd(evt) 
​
{
​
    var touches = evt.changedTouches;
​
    var offset = findPos(canvas);
​
    for (var i = 0; i < touches.length; i++) 
​
    {
​
        if(isValidTouch(touches[i])) 
​
        {
​
            evt.preventDefault();
​
            var idx = ongoingTouchIndexById(touches[i].identifier);
​
            if (idx >= 0) 
​
            {
​
                ctx.lineWidth = 4;
​
                ctx.fillStyle = color;
​
                ctx.beginPath();
​
                ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y);
​
                ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
​
               arr_touches.splice(i, 1);
​
            } 
​
        }
​
    }
​
}
​
function handleCancel(evt) 
​
{
​
    evt.preventDefault();
​
    var touches = evt.changedTouches;
​
  
​
    for (var i = 0; i < touches.length; i++) {
​
        arr_touches.splice(i, 1);
​
    }
​
}
​
function copyTouch(touch) 
​
{
​
    return {identifier: touch.identifier,clientX: touch.clientX,clientY: touch.clientY};
​
}
​
function ongoingTouchIndexById(idToFind) 
​
{
​
    for (var i = 0; i < arr_touches.length; i++) {
​
        var id = arr_touches[i].identifier;
​
        if (id == idToFind) {
​
            return i;
​
        }
​
    }
​
    return -1;
​
}
​
function changeColor(new_color) 
​
{
​
    color = new_color;
​
}
​
function clearCanvas() 
​
{
​
    ctx.clearRect(0, 0, canvas.width, canvas.height);
​
}
​
function isValidTouch(touch) 
​
{
​
    var curleft = 0, curtop = 0;
​
    var offset = 0;
​
    
​
    if (canvas.offsetParent) {
​
        do {
​
            curleft += canvas.offsetLeft;
​
            curtop += canvas.offsetTop;
​
        } while (touch == canvas.offsetParent);
​
        
​
        offset = { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
​
    }
​
    
​
    if(touch.clientX-offset.x > 0 &&
​
            touch.clientX-offset.x < parseFloat(canvas.width) &&
​
                touch.clientY-offset.y >0 &&
​
                    touch.clientY-offset.y < parseFloat(canvas.height)) {
​
        return true;
​
    }
​
    else 
​
    {
​
        return false;
​
    }
​
}
​
function findPos(obj) 
​
{
​
    var curleft = 0, curtop = 0;
​
    if (obj.offsetParent) 
​
    {
​
        do {
​
            curleft += obj.offsetLeft;
​
            curtop += obj.offsetTop;
​
        } while (obj == obj.offsetParent);
​
​
​
        return { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
​
    }
​
}

JavaScript

xxxxxxxxxx
 
#canvas
{
    border: 1px solid black;
    margin: 10px 0 10px 0;
    cursor: pointer;
}
#colors button
{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin-top: 0px;
}
#black 
{
    background: black;
}
#pink 
{
    background: pink;
}
#red
{
    background: red;
}
#green 
{ 
    background: green;
}
#blue 
{
    background: blue;
}
#orange 
{
    background: orange;
}

CSS