canvas 手写功能pc移动端

最新推荐文章于 2024-05-23 09:24:55 发布

朱宝鑫

最新推荐文章于 2024-05-23 09:24:55 发布

阅读量1.6k

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/qq_30529627/article/details/51276282

版权

canvas 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML5的Canvas元素在PC和移动端实现手写功能。通过Canvas的绘图API，我们可以创建一个画板让用户自由绘制，同时适配不同设备的触摸事件，确保在各种设备上都能流畅使用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<title>canvas写字</title>
<!--css-->
<link rel="stylesheet" href="css/global.css" />
</head>
<body>
	<canvas id='canvas'></canvas>
	<div id="canvas-btn">
		<div id="block_btn" class="block_btnClass colorBtn colorBtnBorder"></div>
		<div id="red_btn" class="red_btnClass colorBtn"></div>
		<div id="yellow_btn" class="yellow_btnClass colorBtn"></div>
		<div id="clear_btn" class="op_btn">清  除</div>
		<div class="cleaerfix"></div>
	</div>
	<!--js-->
	<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	<script type="text/javascript" src="js/global.js" ></script>
</body>
</html>

/**
 * zbx
 * 2016.4.27
 * **/
body,html{
	margin: 0;
	padding: 0;
	height: 100%;
}
#canvas-btn{
	display: block;
	margin: 0;
	padding: 10px;
}
#clear_btn{
    width: 80%;
    background: #ca4341;
    margin: auto;
    text-align: center;
    line-height: 30px;
    margin-top: 20px;
    color: #fff;
    border-radius: 8px;	
    clear: both;
}
.colorBtn{
    width: 20px;
    height: 20px;
    border-radius: 6px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    border: 2px #fff solid;
}
.red_btnClass{
    background: #ca4341;	
}
.yellow_btnClass{
    background: yellow;	
}
.colorBtn:hover{
	border:2px #E0663A solid;
}
.colorBtnBorder{
	border:2px #655AFF solid;
}
.block_btnClass{
	background: #000;	
}

/**
 * zbx
 * 2016.4.27
 * **/
//获取页面尺寸
var canvasWidth = document.body.clientWidth;
var canvasHeight = canvasWidth;
//声明canvas
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//设置canvas尺寸
canvas.width = canvasWidth;
canvas.height = canvasHeight;
//画笔颜色
var strokeColor = "block";
//鼠标
isMouseDown = false;
//上一次绘制的的坐标
var lastLoc = {x:0,y:0};
//初始记录事件
var lastTimestamp = 0;
//上一次线条宽度
var lastLineWidth = -1;
//var 
var maxV = 10;
var minV = 0.1;
var maxLineWidth = 10;
var minLineWidth = 1;

//点击色块切换画笔颜色
$(".colorBtn").on("click",function (e){
	$(".colorBtn").removeClass('colorBtnBorder');
	$(this).addClass("colorBtnBorder");
	strokeColor = $(this).css("background-color");
})
//清除
$('#clear_btn').on('click',function (e){
	context.clearRect( 0, 0, canvasWidth,canvasHeight);
	drawGrid();
})
//绘制方框
drawGrid();
function drawGrid(){
	context.save()
	context.strokeStyle = "rgb(230,11,9)";
	context.beginPath();
	context.moveTo(3,3);
	context.lineTo(canvasWidth - 3 , 3);
	context.lineTo(canvasWidth - 3 , canvasHeight - 3);
	context.lineTo( 3 , canvasHeight - 3 );
	context.closePath();
	context.lineWidth = 6;
	context.stroke();
	
	context.beginPath();
	context.moveTo(0,0);
	context.lineTo(canvasWidth,canvasHeight);
	
	context.moveTo(canvasWidth,0);
	context.lineTo(0,canvasHeight);
	
	context.moveTo(canvasWidth/2,0);
	context.lineTo(canvasWidth/2,canvasHeight);
	
	context.moveTo(0,canvasHeight/2);
	context.lineTo(canvasWidth,canvasHeight/2)
	
	context.lineWidth = 1;
	context.stroke();
	
	context.restore();
}
//获取canvas 坐标 x，y 分别代表相对window内的xy
function windowToCanvas(x,y){
	//canvas提供的方法返回canvas 距 他外围包围盒子的距离left,top值
	var bbox = canvas.getBoundingClientRect();
	//返回的就是canvas 内的坐标值
	return {x : Math.round(x - bbox.left),y : Math.round(y - bbox.top)}
}

//封装 事件
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 s = calcDistance( curLoc, lastLoc);
	//结束时间
	var curTimestamp = new Date().getTime();
	//时间差
	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赋值维护
	lastLoc = curLoc;
	//时间更新
	lastTimestamp = curTimestamp;
	lastLineWidth = lineWidth;	
}
//pc鼠标事件
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("touchend",function(e){
	e.preventDefault();
	endStroke();
});
canvas.addEventListener("touchmove",function(e){
	e.preventDefault();
	if( isMouseDown){
		touch = e.touches[0];
		moveStroke({x: touch.pageX , y:touch.pageY});	
	}
});
//速度 = 路程 / 时间     用来计算书写速度来改变线条粗细
function calcDistance (loc1,loc2){
	//返回 数的平方根
	return Math.sqrt((loc1.x - loc2.x) * (loc1.x - loc2.x) + (loc1.y - loc2.y) * (loc1.y - loc2.y) );
}
//线条宽度
function calcLineWidth(t,s){
	var v = s/t;
	var resultLineWidth;
	if(v <= minV){
		resultLineWidth = maxLineWidth;
	}else if(v >= maxV){
		resultLineWidth = minLineWidth;
	}else{
		resultLineWidth = maxLineWidth - (v-minV)/(maxV-minV)*(maxLineWidth-minLineWidth);
	}
	if( lastLineWidth == -1){
		return resultLineWidth;
	}else{
		return lastLineWidth*2/3 + resultLineWidth*1/3;
	}
}