canvas写字板代码 兼容pc端和手机端

如何在 canvas 上写字，兼容 pc 端和手机端。

效果图如下：

HTML 代码：

<canvas id="canvas">
    您的浏览器不支持 canvas
</canvas>
<div id="controller">
    <div id="black_btn" ></div>
    <div id="blue_btn" ></div>
    <div id="green_btn" ></div>
    <div id="red_btn" ></div>
    <div id="orange_btn" ></div>
    <div id="yellow_btn" ></div>

    <div id="clear_btn" >清除</div>
    <div ></div>
</div>

CSS 代码：

* {
    margin:0;
    padding:0;
}
#canvas {
    display:block;
    margin:0 auto;
}
#controller {
    margin:0 auto;
}
.op_btn {
    float:right;
    margin:10px 0 0 10px;
    border:2px solid #aaa;
    width:80px;
    height:40px;
    line-height:40px;
    font-size:20px;
    text-align:center;
    border-radius:5px;
    cursor:pointer;
    background-color:#fff;
    font-weight:bold;
}
.op_btn:hover {
    background-color:#fed;
}
.clearfix {
    clear:both;
}
.color_btn {
    float:left;
    margin:10px 10px 0 0;
    border:5px solid white;
    width:40px;
    height:40px;
    border-radius:5px 5px;
    cursor:pointer;
}
.color_btn:hover {
    border:5px solid violet;
}
.color_btn_selected {
    border:5px solid blueviolet;
}
#black_btn {
    background-color:black;
}
#blue_btn {
    background-color:blue;
}
#green_btn {
    background-color:green;
}
#red_btn {
    background-color:red;
}
#orange_btn {
    background-color:orange;
}
#yellow_btn {
    background-color:yellow;
}

JS 代码：

var canvasWidth = Math.min(800, $(window).width() - 20);
var canvasHeight = canvasWidth;
var isMouseDown = false;
var lastLoc = {
    x: 0,
    y: 0
};
var lastTimestamp = 0;
var lastLineWidth = -1;
var strokeColor = 'black';

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = canvasWidth;
canvas.height = canvasHeight;

$('#controller').css("width", canvasWidth + "px")
drawGrid();

$('#clear_btn').click(function(e) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawGrid();
})

$('.color_btn').click(function() {
    $('.color_btn').removeClass('color_btn_selected');
    $(this).addClass('color_btn_selected');
    strokeColor = $(this).css("background-color");

})

function beginStroke(point) {
    isMouseDown = true;
    lastLoc = windowToCanvas(point.x, point.y);
    lastTimestamp = new Date().getTime();
}

function endStroke() {
    isMouseDown = false;
}

function moveStroke(point) {

    var curLoc = windowToCanvas(point.x, point.y);
    var curTimestamp = new Date().getTime();
    var s = calcDistance(curLoc, lastLoc);
    var t = curTimestamp - lastTimestamp;

    var lineWidth = calcLineWidth(t, s);
    context.beginPath();
    context.moveTo(lastLoc.x, lastLoc.y);
    context.lineTo(curLoc.x, curLoc.y);
    context.strokeStyle = strokeColor;
    context.lineWidth = lineWidth;
    context.lineCap = 'round';
    context.lineJoin = 'round';
    context.stroke();
    lastLoc = curLoc;
    lastTimestamp = curTimestamp;
    lastLineWidth = lineWidth;

}

canvas.onmousedown = function(e) {
    e.preventDefault();
    beginStroke({
        x: e.clientX,
        y: e.clientY
    });
}

canvas.onmouseup = function(e) {
    e.preventDefault();
    endStroke();
}

canvas.onmouseout = function(e) {
    e.preventDefault();
    endStroke();
}

canvas.onmousemove = function(e) {
    e.preventDefault();
    if (isMouseDown) {
        moveStroke({
            x: e.clientX,
            y: e.clientY
        })
    }
}

canvas.addEventListener('touchstart', function(e) {
    e.preventDefault();
    touch = e.touches[0];
    beginStroke({
        x: touch.pageX,
        y: touch.pageY
    });
})

canvas.addEventListener('touchmove', function(e) {
    e.preventDefault();
    if (isMouseDown) {
        touch = e.touches[0];
        moveStroke({
            x: touch.pageX,
            y: touch.pageY
        })
    }
})

canvas.addEventListener('touchend', function(e) {
    e.preventDefault();
    endStroke();
})

function windowToCanvas(x, y) {
    var bbox = canvas.getBoundingClientRect();
    return {
        x: Math.round(x - bbox.left),
        y: Math.round(y - bbox.top)
    }
}

function calcDistance(loc1, loc2) {
    return Math.sqrt((loc1.x - loc2.x) * (loc1.x - loc2.x) + (loc1.y - loc2.y) * (loc1.y - loc2.y))
}

var maxLineWidth = 30;
var minLineWidth = 1;
var maxStrokeV = 10;
var minStrokeV = 0.1;

function calcLineWidth(t, s) {
    var v = s / t;

    var resultLineWidth;
    if (v <= minStrokeV) {
        resultLineWidth = maxLineWidth;
    } else if (v >= maxStrokeV) {
        resultLineWidth = minLineWidth;
    } else {
        resultLineWidth = maxLineWidth - (v - minStrokeV) / (maxStrokeV - minStrokeV) * (maxLineWidth - minLineWidth)
    }
    if (lastLineWidth == -1) {
        return resultLineWidth;
    }
    return lastLineWidth * 2 / 3 + resultLineWidth * 1 / 3;
}
//绘制米字格
function drawGrid() {
    context.save();
    context.strokeStyle = 'rgb(230,11,9)';

    context.beginPath();
    context.moveTo(3, 3);
    context.lineTo(canvas.width - 3, 3);
    context.lineTo(canvas.width - 3, canvas.height - 3);
    context.lineTo(3, canvas.height - 3);
    context.closePath();

    context.lineWidth = 6;
    context.stroke();

    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(canvas.width, canvas.height);

    context.moveTo(canvas.width, 0);
    context.lineTo(0, canvas.height);

    context.moveTo(canvas.width / 2, 0);
    context.lineTo(canvas.width / 2, canvas.height);

    context.moveTo(0, canvas.height / 2);
    context.lineTo(canvas.width, canvas.height / 2);

    context.lineWidth = 1;
    context.stroke();

    context.restore();
}

以上就是为大家整理的关于在 canvas 写字板写字，并兼容 pc 端和手机端代码，感兴趣的可以拿去学习。