擴展javascript以使用多個畫布框

Question

不幸的是，我對javascript的了解很少。 我目前正在編寫腳本。 我想使用任何類型的觸摸屏在線簽名文件。 我在線上有一個腳本，該腳本提供了一個具有簽名功能的小畫布框。 不幸的是，我的JavaScript技能太糟糕了，無法按我想要的方式使用它。

 var isSign = false; var leftMButtonDown = false; jQuery(function(){ //Initialize sign pad init_Sign_Canvas(); }); function fun_submit() { if(isSign) { var canvas = $("#canvas").get(0); var imgData = canvas.toDataURL(); jQuery('#page').find('p').remove(); jQuery('#page').find('img').remove(); jQuery('#page').append(jQuery('<p>Your Sign:</p>')); jQuery('#page').append($('<img/>').attr('src',imgData)); closePopUp(); } else { alert('Please sign'); } } function closePopUp() { jQuery('#divPopUpSignContract').popup('close'); jQuery('#divPopUpSignContract').popup('close'); } function init_Sign_Canvas() { isSign = false; leftMButtonDown = false; //Set Canvas width var sizedWindowWidth = $(window).width(); if(sizedWindowWidth > 700) sizedWindowWidth = $(window).width() / 2; else if(sizedWindowWidth > 400) sizedWindowWidth = sizedWindowWidth - 100; else sizedWindowWidth = sizedWindowWidth - 50; $("#canvas").width(200); $("#canvas").height(50); $("#canvas").css("border","1px solid #000"); var canvas = $("#canvas").get(0); canvasContext = canvas.getContext('2d'); if(canvasContext) { canvasContext.canvas.width = 200; canvasContext.canvas.height = 50; canvasContext.fillStyle = "#fff"; canvasContext.fillRect(0,0,sizedWindowWidth,200); canvasContext.moveTo(50,150); canvasContext.lineTo(sizedWindowWidth-50,150); canvasContext.stroke(); canvasContext.fillStyle = "#000"; canvasContext.font="20px Arial"; canvasContext.fillText("x",40,155); } // Bind Mouse events $(canvas).on('mousedown', function (e) { if(e.which === 1) { leftMButtonDown = true; canvasContext.fillStyle = "#000"; var x = e.pageX - $(e.target).offset().left; var y = e.pageY - $(e.target).offset().top; canvasContext.moveTo(x, y); } e.preventDefault(); return false; }); $(canvas).on('mouseup', function (e) { if(leftMButtonDown && e.which === 1) { leftMButtonDown = false; isSign = true; } e.preventDefault(); return false; }); // draw a line from the last point to this one $(canvas).on('mousemove', function (e) { if(leftMButtonDown == true) { canvasContext.fillStyle = "#000"; var x = e.pageX - $(e.target).offset().left; var y = e.pageY - $(e.target).offset().top; canvasContext.lineTo(x,y); canvasContext.stroke(); } e.preventDefault(); return false; }); //bind touch events $(canvas).on('touchstart', function (e) { leftMButtonDown = true; canvasContext.fillStyle = "#000"; var t = e.originalEvent.touches[0]; var x = t.pageX - $(e.target).offset().left; var y = t.pageY - $(e.target).offset().top; canvasContext.moveTo(x, y); e.preventDefault(); return false; }); $(canvas).on('touchmove', function (e) { canvasContext.fillStyle = "#000"; var t = e.originalEvent.touches[0]; var x = t.pageX - $(e.target).offset().left; var y = t.pageY - $(e.target).offset().top; canvasContext.lineTo(x,y); canvasContext.stroke(); e.preventDefault(); return false; }); $(canvas).on('touchend', function (e) { if(leftMButtonDown) { leftMButtonDown = false; isSign = true; } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="canvas">Canvas is not supported</canvas> 

我需要3個可以相互平行簽名的畫布框。 是否可以給我提示或教程，或者可以使我理解我需要更改的內容？

Answer 1

不太確定這是否是您的意思（也許是三個獨立的登錄框？）。

使用3個HTML5 <canvas>元素，並將其初始化。 然后，使用drawImage()函數將第一個畫布圖像復制到其他兩個畫布的上下文中。

 var isSign = false; var leftMButtonDown = false; jQuery(function(){ //Initialize sign pad init_Sign_Canvas(); }); function fun_submit() { if(isSign) { var canvas = $("#canvas").get(0); var imgData = canvas.toDataURL(); jQuery('#page').find('p').remove(); jQuery('#page').find('img').remove(); jQuery('#page').append(jQuery('<p>Your Sign:</p>')); jQuery('#page').append($('<img/>').attr('src',imgData)); closePopUp(); } else { alert('Please sign'); } } function closePopUp() { jQuery('#divPopUpSignContract').popup('close'); jQuery('#divPopUpSignContract').popup('close'); } function init_Sign_Canvas() { isSign = false; leftMButtonDown = false; //Set Canvas width var sizedWindowWidth = $(window).width(); if(sizedWindowWidth > 700) sizedWindowWidth = $(window).width() / 2; else if(sizedWindowWidth > 400) sizedWindowWidth = sizedWindowWidth - 100; else sizedWindowWidth = sizedWindowWidth - 50; $("#canvas").width(200); $("#canvas").height(50); $("#canvas").css("border","1px solid #000"); $("#canvas2").width(200); $("#canvas2").height(50); $("#canvas2").css("border","1px solid #000"); $("#canvas3").width(200); $("#canvas3").height(50); $("#canvas3").css("border","1px solid #000"); var canvas = $("#canvas").get(0); var canvas2 = $("#canvas2").get(0); var canvas3 = $("#canvas3").get(0); canvasContext = canvas.getContext('2d'); canvas2ctx = canvas2.getContext('2d'); canvas3ctx = canvas3.getContext('2d'); if(canvasContext) { canvasContext.canvas.width = 200; canvasContext.canvas.height = 50; canvas2ctx.canvas.width = 200; canvas2ctx.canvas.height = 50; canvas3ctx.canvas.width = 200; canvas3ctx.canvas.height = 50; canvasContext.fillStyle = "#fff"; canvasContext.fillRect(0,0,sizedWindowWidth,200); canvasContext.moveTo(50,150); canvasContext.lineTo(sizedWindowWidth-50,150); canvasContext.stroke(); canvasContext.fillStyle = "#000"; canvasContext.font="20px Arial"; canvasContext.fillText("x",40,155); } // Bind Mouse events $(canvas).on('mousedown', function (e) { if(e.which === 1) { leftMButtonDown = true; canvasContext.fillStyle = "#000"; var x = e.pageX - $(e.target).offset().left; var y = e.pageY - $(e.target).offset().top; canvasContext.moveTo(x, y); } e.preventDefault(); return false; }); $(canvas).on('mouseup', function (e) { if(leftMButtonDown && e.which === 1) { leftMButtonDown = false; isSign = true; canvas2ctx.drawImage(canvas,0,0); canvas3ctx.drawImage(canvas,0,0); } e.preventDefault(); return false; }); // draw a line from the last point to this one $(canvas).on('mousemove', function (e) { if(leftMButtonDown == true) { canvasContext.fillStyle = "#000"; var x = e.pageX - $(e.target).offset().left; var y = e.pageY - $(e.target).offset().top; canvasContext.lineTo(x,y); canvasContext.stroke(); } e.preventDefault(); return false; }); //bind touch events $(canvas).on('touchstart', function (e) { leftMButtonDown = true; canvasContext.fillStyle = "#000"; var t = e.originalEvent.touches[0]; var x = t.pageX - $(e.target).offset().left; var y = t.pageY - $(e.target).offset().top; canvasContext.moveTo(x, y); e.preventDefault(); return false; }); $(canvas).on('touchmove', function (e) { canvasContext.fillStyle = "#000"; var t = e.originalEvent.touches[0]; var x = t.pageX - $(e.target).offset().left; var y = t.pageY - $(e.target).offset().top; canvasContext.lineTo(x,y); canvasContext.stroke(); e.preventDefault(); return false; }); $(canvas).on('touchend', function (e) { if(leftMButtonDown) { leftMButtonDown = false; isSign = true; } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="canvas">Canvas is not supported</canvas> <canvas id="canvas2">Canvas is not supported</canvas> <canvas id="canvas3">Canvas is not supported</canvas>