जावास्क्रिप्ट कैनवास भग्न

आज, मैं पढ़ने के एक पोस्ट सदस्य celen और टी भग्न की सुंदरता से प्रेरित है। चूंकि मैं जावास्क्रिप्ट कैनवस में रेखापुंज रचनाएं बनाने का थोड़ा शौकीन हूं, इसलिए मुझे एक ही बात को लागू करने का विचार था, केवल क्लाइंट की तरफ से जेएस का उपयोग करके, लोड से सर्वर को मुक्त करना।

एचटीएमएल-दस्तावेज़ के मुख्य भाग है, तो आप एक टैग बनाना होगा <canvas> :

 <canvas id="canvas"></canvas> 

यह काफी अजीब है: डिफ़ॉल्ट आकार 300h150 है। उसके लिए जावास्क्रिप्ट से नए आकार निर्धारित करना बेहतर है।

 var canva = document.getElementById('canvas'); canva.width = window.innerWidth; canva.height = window.innerHeight; var ctx = canva.getContext('2d'); ); var canva = document.getElementById('canvas'); canva.width = window.innerWidth; canva.height = window.innerHeight; var ctx = canva.getContext('2d'); 

अब हम कुछ सहायक कार्यों को परिभाषित।

 function clear() { ctx.clearRect(0, 0, canva.width, canva.height); ctx.fillStyle = 'rgba(0,0,0,1)'; ctx.fillRect(0, 0, canva.width, canva.height); } ; function clear() { ctx.clearRect(0, 0, canva.width, canva.height); ctx.fillStyle = 'rgba(0,0,0,1)'; ctx.fillRect(0, 0, canva.width, canva.height); } 

clear() फ़ंक्शन पूरे कार्य क्षेत्र को साफ करता है। तुरंत clearRect और पूर्ण fillRect क्यों है? और यकीन के लिए ।

निम्नलिखित समारोह एक निर्दिष्ट स्थान पर एक पूर्व निर्धारित आकार का केवल एक पैटर्न के उत्पादन के लिए जिम्मेदार है। पैटर्न खुद को figure आकार NxN के द्वि-आयामी सरणी का उपयोग करके वर्णित किया गया है, जिनमें से तत्व मान 0 और 1 लेते हैं (0 एक पारदर्शी ब्लॉक है, 1 एक रंग ब्लॉक है)।

 function PrintFigure(x, y, size, style) { var sizeElem = Math.floor(size / N); for (var i = 0; i < N; i++) for (var k = 0; k < N; k++) if (figure[i][k] == 1) { ctx.fillStyle = style; ctx.fillRect(x + i * sizeElem, y + k * sizeElem, sizeElem, sizeElem); } } 

निर्देशांक की गणना और आकार सावधान रहना चाहिए और काट-छांट संभावित गैर पूर्णांक है।

ड्राइंग की सीमाएं कैनवास की सीमाएं होंगी।

 var MAX_X = canva.width, MAX_Y = canva.height; 

उन्हें एक ठोस छवि प्राप्त करने के लिए थोड़ा सा जाना होगा।

और अंत में, समारोह है कि किसी दिए गए क्षेत्र में एक पैटर्न खींचता है, लंबे समय के रूप के रूप में वह यह [क्षेत्र] में है रखा गया है।

 function CreateTFractal() { clear(); var size = N; var countByX = Math.floor(MAX_X / size), countByY = Math.floor(MAX_Y / size); while ((countByX > 0) && (countByY > 0)) { //      for (var i = 0; i <= countByX; i++) { for (var k = 0; k <= countByY; k++) { PrintFigure(i * size, k * size, size, 'rgba(255, 255, 255, 0.3)'); } // k } // i size *= 2; //      countByX = Math.floor(MAX_X / size), countByY = Math.floor(MAX_Y / size); } } ), function CreateTFractal() { clear(); var size = N; var countByX = Math.floor(MAX_X / size), countByY = Math.floor(MAX_Y / size); while ((countByX > 0) && (countByY > 0)) { //      for (var i = 0; i <= countByX; i++) { for (var k = 0; k <= countByY; k++) { PrintFigure(i * size, k * size, size, 'rgba(255, 255, 255, 0.3)'); } // k } // i size *= 2; //      countByX = Math.floor(MAX_X / size), countByY = Math.floor(MAX_Y / size); } } ) { function CreateTFractal() { clear(); var size = N; var countByX = Math.floor(MAX_X / size), countByY = Math.floor(MAX_Y / size); while ((countByX > 0) && (countByY > 0)) { //      for (var i = 0; i <= countByX; i++) { for (var k = 0; k <= countByY; k++) { PrintFigure(i * size, k * size, size, 'rgba(255, 255, 255, 0.3)'); } // k } // i size *= 2; //      countByX = Math.floor(MAX_X / size), countByY = Math.floor(MAX_Y / size); } } ) { function CreateTFractal() { clear(); var size = N; var countByX = Math.floor(MAX_X / size), countByY = Math.floor(MAX_Y / size); while ((countByX > 0) && (countByY > 0)) { //      for (var i = 0; i <= countByX; i++) { for (var k = 0; k <= countByY; k++) { PrintFigure(i * size, k * size, size, 'rgba(255, 255, 255, 0.3)'); } // k } // i size *= 2; //      countByX = Math.floor(MAX_X / size), countByY = Math.floor(MAX_Y / size); } } 

शर्तों और एक चक्र में while विचार में या द्वारा प्रतिस्थापित किया जा सकता है।

डेमो / डाउनलोड html पृष्ठ और जेएस कोड संग्रह

Poiteratsionnaya प्रतिपादन छवि (सही और ऊपर से नीचे बाएं से):



यह जावास्क्रिप्ट का उपयोग करके <canvas> से PNG तक छवि को बचाने की क्षमता पर थोड़ा ध्यान देने योग्य है:

 window.open(document.getElementById("canvas").toDataURL("image/png"),"tfract_save"); 

इस विधि का नुकसान एक लाइन का पता की लंबाई सीमित करने के लिए है।

वह सब है। कोड के बाकी रूपों और नियंत्रण की सामान्य प्रसंस्करण है।