canvas写字板代码

Html

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

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

立即下载

canvas写字板代码



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

更新时间：2021-09-16 01:25:25

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

yellow kid

相关代码

canvas写字板代码

最新