<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ...
<!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>
