高级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.