- A+
所属分类：Web前端
<!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>
