canvas实现田字格写字板效果

浏览：864次- 评论：0次- 发布时间：2021-10-27

Html

Css

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();
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.1

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：在canvas上写字，兼容pc端和手机端

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取