高級JavaScript / HTML5畫布
[英]Advanced JavaScript/HTML5 canvases
問題描述
我正在學習HTML5（畫布）和高級JavaScript（模塊，原型等），並希望重新考慮我已經放在一起的基本片段。
如何重用我的函數來處理同一頁面上的多個canvas元素？ 我發現這篇文章描述了我希望實現的一般想法。 但是，我遇到了問題因為我在更新頁面上的輸入時調用了draw()方法，這導致我丟失了上下文。 這是我到目前為止的一小部分：
var sliderModule = (function(win, doc) { win.onload = init; // canvas and context variables var canvas1, canvas2, canvas3; var context1, context2, context3; function init() { // draw the initial pattern drawPattern1(); drawPattern2(); drawPattern3(); } // called whenever the slider value changes function drawPattern1() { const canvas = document.getElementById('bullsEye1'); const context = canvas.getContext('2d'); canvas.width = 100; canvas.height = 100; const colors = ['#F00', '#00F']; const outerRadius = 50; let bandSize = doc.getElementById("bandWidth1").value; doc.getElementById("currentBandWidth1").innerHTML = bandSize; for ( let r = outerRadius, colorIndex = 0; r > 0; r -= bandSize, colorIndex = (colorIndex + 1) % colors.length ) { context.fillStyle = colors[colorIndex]; context.beginPath(); context.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2); context.closePath(); context.fill(); } } function drawPattern2() { const canvas = document.getElementById('bullsEye2'); const context = canvas.getContext('2d'); canvas.width = 100; canvas.height = 100; const colors = ['#F00', '#00F']; const outerRadius = 50; let bandSize = doc.getElementById("bandWidth2").value; doc.getElementById("currentBandWidth2").innerHTML = bandSize; for ( let r = outerRadius, colorIndex = 0; r > 0; r -= bandSize, colorIndex = (colorIndex + 1) % colors.length ) { context.fillStyle = colors[colorIndex]; context.beginPath(); context.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2); context.closePath(); context.fill(); } } function drawPattern3() { const canvas = document.getElementById('bullsEye3'); const context = canvas.getContext('2d'); canvas.width = 100; canvas.height = 100; const colors = ['#F00', '#00F']; const outerRadius = 50; let bandSize = doc.getElementById("bandWidth3").value; doc.getElementById("currentBandWidth3").innerHTML = bandSize; for ( let r = outerRadius, colorIndex = 0; r > 0; r -= bandSize, colorIndex = (colorIndex + 1) % colors.length ) { context.fillStyle = colors[colorIndex]; context.beginPath(); context.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2); context.closePath(); context.fill(); } } return { drawPattern1: drawPattern1, drawPattern2: drawPattern2, drawPattern3: drawPattern3 }; })(window, document);
main { width: 100%; } div { width: 30%; } #left { float: left; margin-left: 2%; } #middle { position: relative; left: 0px; right: 0px; margin: auto; } #right { float: right; margin-right: 2%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <title>Bulls Eye</title> <head> </head> <body> <main> <div id="left"> <canvas id="bullsEye1" style="border: 1px solid;"> </canvas><br> <label for="bandWidth1">BandWidth:</label> <input type="range" id="bandWidth1" min="5" max="50" step="5" value="25" oninput="sliderModule.drawPattern1()"></input> <p>Current band width: <span id="currentBandWidth1"></span></p> </div> <div id="right"> <canvas id="bullsEye2" style="border: 1px solid;"></canvas><br> <label for="bandWidth2">BandWidth:</label> <input type="range" id="bandWidth2" min="5" max="50" step="5" value="25" oninput="sliderModule.drawPattern2()"></input> <p>Current band width: <span id="currentBandWidth2"></span></p> </div> <div id="middle"> <canvas id="bullsEye3" style="border: 1px solid;"></canvas><br> <label for="bandWidth3">BandWidth:</label> <input type="range" id="bandWidth3" min="5" max="50" step="5" value="25" oninput="sliderModule.drawPattern3()"></input> <p>Current band width: <span id="currentBandWidth3"></span></p> </div> <br style="clear:both;" /> </main> </html>
3 個解決方案
解決方案1
0 2019-03-21 00:31:53
您需要使用對象，使用您的函數創建一個類，然后實例化一個對象以使用它的函數。
解決方案2
0 2019-03-21 00:40:02
我希望它可以幫助你：
var sliderModule = (function(win, doc) { win.onload = init; // canvas and context variables var canvas1, canvas2, canvas3; var context1, context2, context3; function init() { // draw the initial pattern drawPattern(1); drawPattern(2); drawPattern(3); } // called whenever the slider value changes function drawPattern(num) { const canvas = document.getElementById('bullsEye'+num); const context = canvas.getContext('2d'); canvas.width = 100; canvas.height = 100; const colors = ['#F00', '#00F']; const outerRadius = 50; let bandSize = doc.getElementById("bandWidth"+num).value; doc.getElementById("currentBandWidth"+num).innerHTML = bandSize; for ( let r = outerRadius, colorIndex = 0; r > 0; r -= bandSize, colorIndex = (colorIndex + 1) % colors.length ) { context.fillStyle = colors[colorIndex]; context.beginPath(); context.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2); context.closePath(); context.fill(); } } return { drawPattern }; })(window, document);
main { width: 100%; } div { width: 30%; } #left { float: left; margin-left: 2%; } #middle { position: relative; left: 0px; right: 0px; margin: auto; } #right { float: right; margin-right: 2%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <title>Bulls Eye</title> <head> </head> <body> <main> <div id="left"> <canvas id="bullsEye1" style="border: 1px solid;"> </canvas><br> <label for="bandWidth1">BandWidth:</label> <input type="range" id="bandWidth1" min="5" max="50" step="5" value="25" oninput="sliderModule.drawPattern(1)"></input> <p>Current band width: <span id="currentBandWidth1"></span></p> </div> <div id="right"> <canvas id="bullsEye2" style="border: 1px solid;"></canvas><br> <label for="bandWidth2">BandWidth:</label> <input type="range" id="bandWidth2" min="5" max="50" step="5" value="25" oninput="sliderModule.drawPattern(2)"></input> <p>Current band width: <span id="currentBandWidth2"></span></p> </div> <div id="middle"> <canvas id="bullsEye3" style="border: 1px solid;"></canvas><br> <label for="bandWidth3">BandWidth:</label> <input type="range" id="bandWidth3" min="5" max="50" step="5" value="25" oninput="sliderModule.drawPattern(3)"></input> <p>Current band width: <span id="currentBandWidth3"></span></p> </div> <br style="clear:both;" /> </main> </html>
解決方案3
0
這是你應該做的功課嗎？ 我不會改寫，所以你會得到一個A，但這里有一些東西可以讓你去...
var sliderModule = (function(win, doc) { win.onload = init; // canvas and context variables var canvas1, canvas2, canvas3; var context1, context2, context3; function init() { // draw the initial pattern draw('bullsEye1',doc.getElementById('bandWidth1').value, 'currentBandWidth1'); draw('bullsEye2',doc.getElementById('bandWidth2').value, 'currentBandWidth2'); draw('bullsEye3',doc.getElementById('bandWidth3').value, 'currentBandWidth3'); } function draw(can,val, outid){ const canvas=doc.getElementById(can); const context = canvas.getContext('2d'); const output=doc.getElementById(outid) canvas.width = 100; canvas.height = 100; const colors = ['#F00', '#00F']; const outerRadius = 50; let bandSize = val; output.innerHTML = bandSize; for ( let r = outerRadius, colorIndex = 0; r > 0; r -= bandSize, colorIndex = (colorIndex + 1) % colors.length ) { context.fillStyle = colors[colorIndex]; context.beginPath(); context.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2); context.closePath(); context.fill(); } } return { draw:draw }; })(window, document);
main { width: 100%; } div { width: 30%; } #left { float: left; margin-left: 2%; } #middle { position: relative; left: 0px; right: 0px; margin: auto; } #right { float: right; margin-right: 2%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <title>Bulls Eye</title> <head> </head> <body> <main> <div id="left"> <canvas id="bullsEye1" style="border: 1px solid;"> </canvas><br> <label for="bandWidth1">BandWidth:</label> <input type="range" id="bandWidth1" min="5" max="50" step="5" value="25" oninput="sliderModule.draw('bullsEye1',this.value,'currentBandWidth1')"></input> <p>Current band width: <span id="currentBandWidth1"></span></p> </div> <div id="right"> <canvas id="bullsEye2" style="border: 1px solid;"></canvas><br> <label for="bandWidth2">BandWidth:</label> <input type="range" id="bandWidth2" min="5" max="50" step="5" value="25" oninput="sliderModule.draw('bullsEye2',this.value,'currentBandWidth2')"></input> <p>Current band width: <span id="currentBandWidth2"></span></p> </div> <div id="middle"> <canvas id="bullsEye3" style="border: 1px solid;"></canvas><br> <label for="bandWidth3">BandWidth:</label> <input type="range" id="bandWidth3" min="5" max="50" step="5" value="25" oninput="sliderModule.draw('bullsEye3',this.value,'currentBandWidth3')"></input> <p>Current band width: <span id="currentBandWidth3"></span></p> </div> <br style="clear:both;" /> </main> </html>
HTML5 / Javascript-多個畫布之間無法拖放的完美示例
[英]HTML5/Javascript - Perfect example of Drag and Drop between multiple canvases not working
是否可以通過for循環引用多個html5畫布和變量名？
[英]Is it possible to reference multiple html5 canvases and variable names through a for loop?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.