<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canves</title>
<style>
#canvas {
cursor:url(../images/pen.png),crosshair;
}
#canvasdiv{
border: 1px solid #bcbcbc;
}
</style>
</head>
<body>
<div id="canvasdiv">
<canvas id="canvas"></canvas>
</div>
<button type="button" class="layui-btn layui-btn-normal" id="clear" style="display: none" onclick="clear_all()" onsubmit="return false;"></button>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var base64data='';
canvas.width="320"
canvas.height="240"
//页面不出现滚动滑动
$("html,body").css("overflow","hidden").css("height","100%");
document.body.addEventListener('touchmove', self.welcomeShowedListener, false);
//画一个黑色矩形
ctx.fillStyle = "rgba(225,225,225,0)";//绘制填充颜色 透明色
ctx.fillRect(0, 0,320,240);//绘制一个被填充的矩形
//按下标记
var onoff = false;
//定义起始位置
var oldx = 0;
var oldy = 0;
//设置画笔颜色默认为黑色
var linecolor = "black";
//画笔宽度默认为4
var linw = 4;
//判断是触摸还是鼠标
if (document.body.ontouchstart !== undefined) {
//执行touch代码
// 手指按下
canvas.ontouchstart = e => {
painting = true
const event = e.touches[0]
ctx.lineCap = 'round'
ctx.lineJoin = 'round'
const x = event.pageX
const y = event.pageY
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineWidth = linw
ctx.strokeStyle = linecolor
}
// 手指移动
canvas.ontouchmove = e => {
if (!painting) {
return
}
const event = e.touches[0]
const x = event.pageX
const y = event.pageY
ctx.lineTo(x, y)
ctx.stroke()
}
// 手指抬起
canvas.ontouchend = () => {
if (!painting) {
return false
}
painting = false
ctx.closePath()
}
// 手指离开区域
ontouchcancel = () => {
if (!painting) {
return false
}
painting = false
ctx.closePath()
}
} else {
//鼠标移动事件，事件绑定
// 执行mouse代码
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mousedown", down);
canvas.addEventListener("mouseup", up);
}
// 下笔时按下标记打开，给oldx、oldy赋值
function down(event) {
onoff = true;
oldx = event.pageX;
oldy = event.pageY;
}
//检测鼠标离开后，按下标记关闭
function up() {
onoff = false;
}
//画图，按下标记打开
function draw(event) {
if (onoff == true) {
var newx = event.pageX ;
var newy = event.pageY;
// 起始一条路径，或重置当前路径。
ctx.beginPath();
// 把路径移动到画布中的指定点，不创建线条。
ctx.moveTo(oldx, oldy);
// 添加一个新点，然后在画布中创建从该点到最后指定点的线条。
ctx.lineTo(newx, newy);
// 设置或返回用于笔触的颜色、渐变或模式。
ctx.strokeStyle = linecolor;
// 设置或返回当前的线条宽度。
ctx.lineWidth = linw;
// 设置或返回线条的结束端点样式。
ctx.lineCap = "round";
// 绘制已定义的路径。
ctx.stroke();
oldx = newx;
oldy = newy;
}
}
// 生成图片
function generate_picture() {
const dataImg = new Image();
// canvas生成图片
dataImg.src = canvas.toDataURL('image/png');
};
//清理画布
function clear_all() {
ctx.fillStyle = 'rgba(225,225,225,0)';
ctx.fillRect(0, 0, 320,240);
};
// 下载图片
function download_picture() {
const dataImg = new Image();
dataImg.src = canvas.toDataURL('image/png');
document.querySelector('#image').appendChild(dataImg)
const alink = document.createElement("a");
alink.href = dataImg.src;
alink.download = "testImg.jpg";
alink.click();
}
</script>
</html>
标签：canvas,const,鼠标,画板,ctx,var,false,event From： https://www.cnblogs.com/lhjy1/p/17121473.html