如何在兩個以上的畫布中繪制 HTML & JS

Question

我正在研究一個項目，我需要繪制近 5 個 canvas。 我已經成功創建了第一個 canvas，但是當我輸入第二個代碼時，我只能使用這個最新的 canvas。

我讀到的問題可能是我試圖將保存在不同的 ctx 變量中的上下文（“2d”），比如 ctx2 或類似的東西。

這是我的代碼：

HTML

 <!--First Canvas--> <div class="col-sm-12 col-lg-6 mt-5 d-flex flex-column justify-content-center"> <div id="contenedor-pizarra-cervical" class="contenedor-pizarra mx-auto"> <canvas id="pizarra-cervical"></canvas> </div> </div> <!--Second Canvas--> <div class="col-sm-12 col-lg-6 mt-5 d-flex flex-column justify-content-center"> <div id="contenedor-pizarra-postural" class="contenedor-pizarra mx-auto"> <canvas id="pizarra-postural"></canvas> </div> </div>

第一個 CANVAS 的 JS 工作正常：

 //Canvas Cervical var canvasCervical = document.getElementById("pizarra-cervical"); var ctx = canvasCervical.getContext("2d"); var painting = document.getElementById("contenedor-pizarra-cervical"); var paintStyle = getComputedStyle(painting); canvasCervical.width = parseInt(paintStyle.getPropertyValue("width")); canvasCervical.height = parseInt(paintStyle.getPropertyValue("height")); var mouse = {x: 0, y: 0}; canvasCervical.addEventListener('mousemove', function(e){ mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop }, false); ctx.lineWidth = 3; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.strokeStyle = '#7baeb0'; canvasCervical.addEventListener('mousedown', function(e){ ctx.beginPath(); ctx.moveTo(mouse.x, mouse.y); canvasCervical.addEventListener('mousemove', onPaint, false); }, false); canvasCervical.addEventListener('mouseup', function(){ canvasCervical.removeEventListener('mousemove', onPaint, false) },false); var onPaint = function (){ ctx.lineTo(mouse.x, mouse.y); ctx.stroke(); };

Answer 1

如果您需要在多個畫布上發生相同的行為，那么您可以在其自己的 function 中定義配置邏輯，提供canvas元素作為參數，如下所示：

 let configureCanvas = canvas => { let painting = canvas.parentNode; let paintStyle = getComputedStyle(painting); let mouse = { x: 0, y: 0 }; let onPaint = () => { ctx.lineTo(mouse.x, mouse.y); ctx.stroke(); }; canvas.width = parseInt(paintStyle.getPropertyValue("width")); canvas.height = parseInt(paintStyle.getPropertyValue("height")); let ctx = canvas.getContext("2d"); ctx.lineWidth = 3; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.strokeStyle = '#7baeb0'; canvas.addEventListener('mousemove', function(e) { mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop }, false); canvas.addEventListener('mousedown', function(e) { ctx.beginPath(); ctx.moveTo(mouse.x, mouse.y); canvas.addEventListener('mousemove', onPaint, false); }, false); canvas.addEventListener('mouseup', function() { canvas.removeEventListener('mousemove', onPaint, false) }, false); canvas.nextElementSibling.addEventListener('click', function() { ctx.clearRect(0, 0, canvas.width, canvas.height); }); } configureCanvas(document.getElementById("pizarra-cervical")); configureCanvas(document.getElementById("pizarra-postural"));

 canvas { border: 1px solid #CCC; }

 <!--First Canvas--> <div class="col-sm-12 col-lg-6 mt-5 d-flex flex-column justify-content-center"> <div id="contenedor-pizarra-cervical" class="contenedor-pizarra mx-auto"> <canvas id="pizarra-cervical"></canvas> <button class="clear">Clear</button> </div> </div> <!--Second Canvas--> <div class="col-sm-12 col-lg-6 mt-5 d-flex flex-column justify-content-center"> <div id="contenedor-pizarra-postural" class="contenedor-pizarra mx-auto"> <canvas id="pizarra-postural"></canvas> <button class="clear">Clear</button> </div> </div>

更進一步，我建議定義您自己的 Class 來處理canvas元素的初始化、配置和事件處理程序，但這遠遠超出了這個問題的范圍。