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

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

效果图如下：

HTML 代码：

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

    <div id="clear_btn" class="op_btn">清除</div>
    <div class="clearfix"></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 端和手机端代码，感兴趣的可以拿去学习。

以上关于canvas写字板代码 兼容pc端和手机端的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。