公司大电视机是安卓系统而且系统,但因为突然无法联网又不允许第三方应用程序,但零时需要画板功能。所以就简单做个画板工具代替一下。
1.在canvas中获取光标坐标
获取坐标的代码很简单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
*{margin: 0;padding: 0}
</style>
</head>
<body>
<canvas id="board" style="border: 1px #ccc solid;"></canvas>
<span id="point"></span>
<script>
var canvas = document.getElementById('board');
var context = canvas.getContext('2d');
var current = {
color: 'black',//<===画笔颜色配置
width: 1//线条宽度
};
//获取点坐标
function getPoint(e) {
if (e.touches && e.touches.length > 0) {
var touch = e.touches[0];
return { x: touch.pageX, y: touch.pageY };
}
return { x: e.clientX, y: e.clientY };
}
//鼠标移动
function onMouseMove(e) {
var p = getPoint(e);
document.getElementById("point").innerHTML=p.x+"-"+p.y;
}
canvas.width = 600;
canvas.height = 300;
canvas.addEventListener('mousemove', onMouseMove, false); //<==兼容PC
canvas.addEventListener('touchmove', onMouseMove, false);//<===兼容安卓或其他系统
</script>
</body>
</html>
注意:因为鼠标与触摸屏的事件是不一样的,鼠标只要悬浮与canvas上就可以获取到了,而触摸屏是需要按下的,并且所返回的 Event 对象也是不一样的。
2.控制是否绘制
控制是否绘制其实很简单,就是在不同事件时判断自定义变量drawing的值来控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
*{margin: 0;padding: 0}
</style>
</head>
<body>
<canvas id="board" style="border: 1px #ccc solid;"></canvas>
<span id="point"></span>
<script>
var canvas = document.getElementById('board');
var context = canvas.getContext('2d');
var current = {
color: 'black',//<===画笔颜色配置
width: 1//线条宽度
};
var drawing = false;//<===是否绘制
//获取点坐标
function getPoint(e) {
if (e.touches && e.touches.length > 0) {
var touch = e.touches[0];
return { x: touch.pageX, y: touch.pageY };
}
return { x: e.clientX, y: e.clientY };
}
//鼠标按下
function onMouseDown(e) {
drawing = true;
}
//鼠标弹起
function onMouseUp(e) {
if (!drawing) { return; }
drawing = false;
}
//鼠标移动
function onMouseMove(e) {
if (!drawing) { return; }
var p = getPoint(e);
document.getElementById("point").innerHTML=p.x+"-"+p.y;
}
canvas.width = 600;
canvas.height = 300;
canvas.addEventListener('mousedown', onMouseDown, false);
canvas.addEventListener('mouseup', onMouseUp, false);
canvas.addEventListener('mouseout', onMouseUp, false);
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('touchstart', onMouseDown, false);
canvas.addEventListener('touchend', onMouseUp, false);
canvas.addEventListener('touchmove', onMouseMove, false);
</script>
</body>
</html>
3.线条绘制
线条绘制的代码也是很简单的
....
//线条绘制
function drawLine(x0, y0, x1, y1, color, width) {
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.strokeStyle = color;
context.lineWidth = width;
context.stroke();
context.closePath();
}
....
将绘制线条代码整合到事件中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="board" style="border: 1px #ccc solid;"></canvas>
<span id="point"></span>
<script>
var canvas = document.getElementById('board');
var context = canvas.getContext('2d');
var current = {
color: 'black',//<===画笔颜色配置
width: 1//线条宽度
};
var drawing = false;//<===是否绘制
//获取点坐标
function getPoint(e) {
if (e.touches && e.touches.length > 0) {
var touch = e.touches[0];
return { x: touch.pageX, y: touch.pageY };
}
return { x: e.clientX, y: e.clientY };
}
//线条绘制
function drawLine(x0, y0, x1, y1, color, width) {
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.strokeStyle = color;
context.lineWidth = width;
context.stroke();
context.closePath();
}
//鼠标按下
function onMouseDown(e) {
drawing = true;
//记录按下点
var p = getPoint(e);
current.x = p.x;
current.y = p.y;
}
//鼠标弹起
function onMouseUp(e) {
if (!drawing) { return; }
drawing = false;
//绘制结束点
var p = getPoint(e);
drawLine(current.x, current.y, p.x, p.y, current.color, current.width);
}
//鼠标移动
function onMouseMove(e) {
if (!drawing) { return; }
var p = getPoint(e);
document.getElementById("point").innerHTML = p.x + "-" + p.y;
//移动绘制
drawLine(current.x, current.y, p.x, p.y, current.color, current.width);
current.x = p.x;
current.y = p.y;
}
canvas.width = 600;
canvas.height = 300;
canvas.addEventListener('mousedown', onMouseDown, false);
canvas.addEventListener('mouseup', onMouseUp, false);
canvas.addEventListener('mouseout', onMouseUp, false);
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('touchstart', onMouseDown, false);
canvas.addEventListener('touchend', onMouseUp, false);
canvas.addEventListener('touchmove', onMouseMove, false);
</script>
</body>
</html>
4.绘制线条优化
当绘制线条宽度比较小的时候还好,一旦比较粗就会有写问题:
宽度为 1
宽度为 10
这时只要稍微改一下绘制的代码就行了
....
//线条绘制
function drawLine(x0, y0, x1, y1, color, width) {
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.strokeStyle = color;
context.lineWidth = width;
//-----加入-----
context.lineCap = "round";
context.lineJoin = "round";
//-----加入-----
context.stroke();
context.closePath();
}
....
效果
示例.html <===打开地址后 将 图片保存到本地,吧后缀改成html
5.其他功能
清空画板
function clear() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
保存画板
function save() {
var a = document.getElementById("download");
if (!a) {
a = document.createElement("a");
a.download = "save.png";
a.hidden = "hidden";
}
a.href = canvas.toDataURL('image/png');
a.click();
}
全屏与退出全屏
//全屏与非全屏状态切换
function toggle_fullscreen() {
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
if (fullscreenEnabled) {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
launchIntoFullscreen(document.documentElement);
$("#expand>i").removeClass("fa-expand");
$("#expand>i").addClass("fa-compress");
} else {
exitFullscreen();
$("#expand>i").removeClass("fa-compress");
$("#expand>i").addClass("fa-expand");
}
}
}
//进入全屏
function launchIntoFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
//退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
