Facebook

shape texture drawer alpha safest cryptocurrency exchange

From Ronalds Mazītis, 2 Years ago, written in JavaScript.
URL https://pastebin.pl/view/ecce6d36
Embed
Download Paste or View Raw
Hits: 109
  1.  
  2. <html>
  3. <head>
  4. <meta charset=utf-8 />
  5. <title>Draw a rectangular shape</title>
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  7.  
  8. </head>
  9.  
  10. <p>Drag to draw lines</p>
  11. <canvas id="canvas" width=900 height=900></canvas>
  12. <br/>
  13. <button id="clear">Clear Canvas</button>
  14.  
  15.  
  16. <br><br>
  17. <button  onclick="spitoutcode();" type="button">Spitout code!</button>
  18.  
  19.  
  20. <div id="listes"></div>
  21. <div id="listes2"></div>
  22.  
  23.  
  24. <div id="new">
  25. <!--
  26. <p id="p1">Tutorix</p>
  27. <p id="p2">Tutorialspoint</p>
  28. -->
  29. </div>
  30.  
  31.  
  32. <script>
  33. var canvas = document.getElementById("canvas");
  34. var ctx = canvas.getContext("2d");
  35. var canvasOffset = $("#canvas").offset();
  36. var offsetX = canvasOffset.left;
  37. var offsetY = canvasOffset.top;
  38. var storedLines = [];
  39. var startX = 0;
  40. var startY = 0;
  41. var isDown;
  42. console.log("stored", storedLines);
  43.  
  44. //let counter = 0;
  45. //for (let i = 0; i < storage.length; i++) {
  46.   //if (storage[i].status === '0') counter++;
  47. //}
  48.  
  49.  
  50. //var animals = [];
  51. //setInterval(function (){
  52. //console.log(storedLines.lenght);
  53. //console.log(storedLines);
  54.  
  55. //}, 300);
  56.  
  57.  
  58. //for(i=0; i<storedLines.lenght; i++){
  59.        
  60. //const kopa = animals.push(storedLines[i]);
  61. //console.log("zbisj", kopa);
  62.  
  63. //}
  64.  
  65. //console.log(storedLines);
  66.  
  67.  
  68. var x = [];
  69. console.log(x);
  70.  
  71.  
  72. ctx.strokeStyle = "orange";
  73. ctx.lineWidth = 3;
  74.  
  75. $("#canvas").mousedown(function(e) {
  76.   handleMouseDown(e);
  77. });
  78. $("#canvas").mousemove(function(e) {
  79.   handleMouseMove(e);
  80. });
  81. $("#canvas").mouseup(function(e) {
  82.   handleMouseUp(e);
  83. });
  84. $("#clear").click(function() {
  85.   storedLines.length = 0;
  86.   redrawStoredLines();
  87. });
  88.  
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95.  
  96. function handleMouseDown(e) {
  97.  
  98.   var mouseX = parseInt(e.clientX - offsetX);
  99.   var mouseY = parseInt(e.clientY - offsetY);
  100.   isDown = true;
  101.  
  102.     const lastItem = storedLines.slice(-1).pop();
  103.         var count = storedLines. length;
  104.        
  105.         if(lastItem){
  106.        
  107.  
  108. if(count > 0){
  109.   startX = lastItem.x2;
  110.   startY = lastItem.y2;
  111. } else {
  112.   startX = mouseX;
  113.   startY = mouseY;
  114. }
  115. } else {
  116.   startX = mouseX;
  117.   startY = mouseY;
  118. }
  119.   console.log("x", startX);
  120.   console.log("y", startY);
  121.  
  122. }
  123.  
  124.  
  125.  
  126.  
  127.  
  128. function handleMouseMove(e) {
  129.   if (!isDown) {
  130.     return;
  131.   }
  132.   redrawStoredLines();
  133.   var mouseX = parseInt(e.clientX - offsetX);
  134.   var mouseY = parseInt(e.clientY - offsetY);
  135.   // draw the current line
  136.   ctx.beginPath();
  137.   ctx.moveTo(startX, startY);
  138.   ctx.lineTo(mouseX, mouseY);
  139.   ctx.stroke();
  140. }
  141.  
  142.  
  143.  
  144.  var list = [];
  145. var list2 = [];
  146. function handleMouseUp(e) {
  147.   isDown = false;
  148.   var mouseX = parseInt(e.clientX - offsetX);
  149.   var mouseY = parseInt(e.clientY - offsetY);
  150.   storedLines.push({
  151.     x1: startX,
  152.     y1: startY,
  153.     x2: mouseX,
  154.     y2: mouseY
  155.   });
  156.  
  157.  
  158.  
  159.  
  160.  
  161.  
  162.  
  163.  
  164.  
  165.  
  166. for (var i = startX; i <= mouseX; i++) {
  167.     list.push(i);
  168. }
  169.  
  170.  
  171. for (var i = startY; i <= mouseY; i++) {
  172.     list2.push(i);
  173. }
  174.  
  175.  
  176.  
  177.  
  178.  
  179.   redrawStoredLines();
  180. }
  181.  
  182.  
  183. console.log("list" , list);
  184. console.log("list2" , list2);
  185.  
  186.  
  187. function spitoutcode(){
  188.  
  189. //foreach line create numbers in array, for every array element create html element and add content to it.
  190.  
  191.  
  192. var len= storedLines. length;
  193.  
  194. //var list = storedLines;
  195.  
  196. //var test = 0;
  197.  
  198. //creates html elements
  199. for(i2=0; i2 < 71; i2++){
  200.  
  201. if(i2 != 0){
  202. tit2 = "p" + i2;
  203. } else {
  204. tit2 = "p";
  205. }
  206.  //const div = document.createElement('listes');
  207.  //const div2 = document.createElement('listes2');
  208.   //div.className = 'row';
  209.   //div2.className = 'row';
  210. //skaitļus no 1 līdz 6 pēc tam no 6 līdz 12 un so on
  211.   //div = '<p id="' + tit + '"></p>';
  212.   //div2 = '<p id="' + tit2 + '"></p>';
  213.     //document.getElementById('listes').appendChild(div);
  214.     //document.getElementById('listes2').appendChild(div2);
  215.    
  216.    
  217.      //var tag = document.createElement("p");
  218.    //tag.setAttribute("id", tit);
  219.    
  220.    
  221.      var tag2 = document.createElement("p");
  222.    tag2.setAttribute("id", tit2);
  223.    
  224.  
  225.    var element = document.getElementById("new");
  226.    //element.appendChild(tag);
  227.    element.appendChild(tag2);
  228.     //var test++;
  229. }
  230.  
  231.  
  232.  
  233. for(i2=0; i2 < 25; i2++){
  234.  
  235. if(i2 != 0){
  236. tit = "list" + i2;
  237.  
  238. } else {
  239. tit = "list";
  240.  
  241. }
  242.  //const div = document.createElement('listes');
  243.  //const div2 = document.createElement('listes2');
  244.   //div.className = 'row';
  245.   //div2.className = 'row';
  246. //skaitļus no 1 līdz 6 pēc tam no 6 līdz 12 un so on
  247.   //div = '<p id="' + tit + '"></p>';
  248.   //div2 = '<p id="' + tit2 + '"></p>';
  249.     //document.getElementById('listes').appendChild(div);
  250.     //document.getElementById('listes2').appendChild(div2);
  251.    
  252.    
  253.      var tag = document.createElement("p");
  254.    tag.setAttribute("id", tit);
  255.    
  256.    
  257.      //var tag2 = document.createElement("p");
  258.    //tag2.setAttribute("id", tit2);
  259.    
  260.  
  261.    var element = document.getElementById("new");
  262.    element.appendChild(tag);
  263.    //element.appendChild(tag2);
  264.     //var test++;
  265. }
  266. //creates html elements
  267.  
  268.  
  269.  
  270. //if(test > 0)
  271.  
  272.  
  273.         document.getElementById("p" + 1).innerHTML = "  //var nTufts    = 15000";
  274.         document.getElementById("p" + 2).innerHTML = "  ///var positions        = new Array(nTufts) ";
  275.         document.getElementById("p" + 3).innerHTML = "          //for(var i = 0; i < nTufts; i++){";
  276.         document.getElementById("p" + 4).innerHTML = "          //var position  = new THREE.Vector3()";
  277.         document.getElementById("p" + 5).innerHTML = "          //position.x    = (Math.random()-0.5)*20";
  278.         document.getElementById("p" + 6).innerHTML = "          //position.z    = (Math.random()-0.5)*20";
  279.         document.getElementById("p" + 7).innerHTML = "          //if(list.includes(position.x) or list2.includes(position.y)){";
  280.         document.getElementById("p" + 8).innerHTML = "          //positions[i]  = position";
  281.         document.getElementById("p" + 9).innerHTML = "                  //};";
  282.         document.getElementById("p" + 10).innerHTML = "                 //}";
  283.         document.getElementById("p" + 11).innerHTML = "                 //}";
  284.         document.getElementById("p" + 12).innerHTML = "                 //var mesh      = THREEx.createGrassTufts(positions)";
  285.         document.getElementById("p" + 13).innerHTML = "                 //scene.add(mesh)";
  286.                 // load the texture
  287.         document.getElementById("p" + 14).innerHTML = "var textureUrl           = THREEx.createGrassTufts.baseUrl+'images/grass01.png'";
  288.         document.getElementById("p" + 15).innerHTML = "var material             = mesh.material";
  289.         document.getElementById("p" + 16).innerHTML = "material.map             = THREE.ImageUtils.loadTexture(textureUrl)";
  290.         document.getElementById("p" + 17).innerHTML = "material.alphaTest       = 0.7";
  291.  
  292.        
  293.  
  294.  
  295.         document.getElementById("p" + 18).innerHTML = " //var nTufts    = 15000";
  296.         document.getElementById("p" + 19).innerHTML = " ///var positions        = new Array(nTufts) ";
  297.         document.getElementById("p" + 20).innerHTML = "         //for(var i = 0; i < nTufts; i++){";
  298.         document.getElementById("p" + 21).innerHTML = "         //var position  = new THREE.Vector3()";
  299.         document.getElementById("p" + 22).innerHTML = "         //position.x    = (Math.random()-0.5)*20";
  300.         document.getElementById("p" + 23).innerHTML = "         //position.z    = (Math.random()-0.5)*20";
  301.         document.getElementById("p" + 24).innerHTML = "         //if(list.includes(position.x) or list2.includes(position.y)){";
  302.         document.getElementById("p" + 25).innerHTML = "         //positions[i]  = position";
  303.         document.getElementById("p" + 26).innerHTML = "                 //};";
  304.         document.getElementById("p" + 27).innerHTML = "                 //}";
  305.         document.getElementById("p" + 28).innerHTML = "                 //}";
  306.         document.getElementById("p" + 29).innerHTML = "                 //var mesh      = THREEx.createGrassTufts(positions)";
  307.         document.getElementById("p" + 30).innerHTML = "                 //scene.add(mesh)";
  308.                 // load the texture
  309.         document.getElementById("p" + 31).innerHTML = "var textureUrl           = THREEx.createGrassTufts.baseUrl+'images/grass02.png'";
  310.         document.getElementById("p" + 32).innerHTML = "var material             = mesh.material";
  311.         document.getElementById("p" + 33).innerHTML = "material.map             = THREE.ImageUtils.loadTexture(textureUrl)";
  312.         document.getElementById("p" + 34).innerHTML = "material.alphaTest       = 0.7";
  313.  
  314.  
  315.         document.getElementById("p" + 35).innerHTML = " //var nTufts    = 15000";
  316.         document.getElementById("p" + 36).innerHTML = " ///var positions        = new Array(nTufts) ";
  317.         document.getElementById("p" + 37).innerHTML = "         //for(var i = 0; i < nTufts; i++){";
  318.         document.getElementById("p" + 38).innerHTML = "         //var position  = new THREE.Vector3()";
  319.         document.getElementById("p" + 39).innerHTML = "         //position.x    = (Math.random()-0.5)*20";
  320.         document.getElementById("p" + 40).innerHTML = "         //position.z    = (Math.random()-0.5)*20";
  321.         document.getElementById("p" + 41).innerHTML = "         //if(list.includes(position.x) or list2.includes(position.y)){";
  322.         document.getElementById("p" + 42).innerHTML = "         //positions[i]  = position";
  323.         document.getElementById("p" + 43).innerHTML = "                 //};";
  324.         document.getElementById("p" + 44).innerHTML = "                 //}";
  325.         document.getElementById("p" + 45).innerHTML = "                 //}";
  326.         document.getElementById("p" + 46).innerHTML = "                 //var mesh      = THREEx.createGrassTufts(positions)";
  327.         document.getElementById("p" + 47).innerHTML = "                 //scene.add(mesh)";
  328.        
  329.                 // load the texture
  330.         document.getElementById("p" + 48).innerHTML = "var material             = mesh.material";
  331.         document.getElementById("p" + 49).innerHTML = "var textureUrl           = THREEx.createGrassTufts.baseUrl+'images/flowers01.png'";
  332.         document.getElementById("p" + 50).innerHTML = "material.map             = THREE.ImageUtils.loadTexture(textureUrl)";
  333.         document.getElementById("p" + 51).innerHTML = "material.emissive.set(0x888888)";
  334.         document.getElementById("p" + 52).innerHTML = "material.alphaTest       = 0.7";
  335.  
  336.         document.getElementById("p" + 53).innerHTML = " //var nTufts    = 15000";
  337.         document.getElementById("p" + 54).innerHTML = " ///var positions        = new Array(nTufts) ";
  338.         document.getElementById("p" + 55).innerHTML = "         //for(var i = 0; i < nTufts; i++){";
  339.         document.getElementById("p" + 56).innerHTML = "         //var position  = new THREE.Vector3()";
  340.         document.getElementById("p" + 57).innerHTML = "         //position.x    = (Math.random()-0.5)*20";
  341.         document.getElementById("p" + 58).innerHTML = "         //position.z    = (Math.random()-0.5)*20";
  342.         document.getElementById("p" + 59).innerHTML = "         //if(list.includes(position.x) or list2.includes(position.y)){";
  343.         document.getElementById("p" + 60).innerHTML = "         //positions[i]  = position";
  344.         document.getElementById("p" + 61).innerHTML = "                 //};";
  345.         document.getElementById("p" + 62).innerHTML = "                 //}";
  346.         document.getElementById("p" + 63).innerHTML = "                 //}";
  347.         document.getElementById("p" + 64).innerHTML = "                 //var mesh      = THREEx.createGrassTufts(positions)";
  348.         document.getElementById("p" + 65).innerHTML = "                 //scene.add(mesh)";
  349.                 // load the texture
  350.         // load the texture
  351.         document.getElementById("p" + 66).innerHTML = "var material             = mesh.material";
  352.         document.getElementById("p" + 67).innerHTML = "var textureUrl           = THREEx.createGrassTufts.baseUrl+'images/flowers02.png'";
  353.         document.getElementById("p" + 68).innerHTML = "material.map             = THREE.ImageUtils.loadTexture(textureUrl)";
  354.         document.getElementById("p" + 69).innerHTML = "material.emissive.set(0x888888)";
  355.         document.getElementById("p" + 70).innerHTML = "material.alphaTest       = 0.7";
  356.  
  357.        
  358. document.getElementById("list" + 1).innerHTML = " // var list =[";
  359. document.getElementById("list" + 2).innerHTML = list;
  360. document.getElementById("list" + 3).innerHTML = "];";
  361.  
  362.  
  363. document.getElementById("list" + 4).innerHTML = " // var list =[";
  364. document.getElementById("list" + 5).innerHTML = list2;
  365. document.getElementById("list" + 6).innerHTML = "];";
  366.        
  367.  
  368.  document.getElementById("list" + 7).innerHTML = " // var list =[";
  369.         document.getElementById("list" + 8).innerHTML = list;
  370.         document.getElementById("list" + 9).innerHTML = "];";
  371.        
  372.          document.getElementById("list" + 10).innerHTML = " // var list =[";
  373.         document.getElementById("list" + 11).innerHTML = list2;
  374.         document.getElementById("list" + 12).innerHTML = "];";
  375.        
  376.  
  377.  
  378.  document.getElementById("list" + 13).innerHTML = " // var list =[";
  379.         document.getElementById("list" + 14).innerHTML = list;
  380.         document.getElementById("list" + 15).innerHTML = "];";
  381.        
  382.          document.getElementById("list" + 16).innerHTML = " // var list =[";
  383.         document.getElementById("list" + 17).innerHTML = list2;
  384.         document.getElementById("list" + 18).innerHTML = "];";
  385.  
  386.  
  387.  document.getElementById("list" + 19).innerHTML = " // var list =[";
  388.         document.getElementById("list" + 20).innerHTML = list;
  389.         document.getElementById("list" + 21).innerHTML = "];";
  390.        
  391.          document.getElementById("list" + 22).innerHTML = " // var list =[";
  392.         document.getElementById("list" + 23).innerHTML = list2;
  393.         document.getElementById("list" + 24).innerHTML = "];";
  394.  
  395.  
  396.  
  397.  
  398.  
  399.        
  400.                
  401.  
  402.        
  403.        
  404.  
  405.  
  406. }
  407.  
  408.  
  409. //spitoutcode();
  410.  
  411.  
  412.  
  413.  
  414.  
  415. function redrawStoredLines() {
  416.   ctx.clearRect(0, 0, canvas.width, canvas.height);
  417.   if (storedLines.length == 0) {
  418.     return;
  419.   }
  420.   // redraw each stored line
  421.   for (var i = 0; i < storedLines.length; i++) {
  422.     ctx.beginPath();
  423.     ctx.moveTo(storedLines[i].x1, storedLines[i].y1);
  424.     ctx.lineTo(storedLines[i].x2, storedLines[i].y2);
  425.     ctx.stroke();
  426.   }
  427. }
  428. </script>
  429.  
  430.  
  431. </body>
  432. </html>
  433.  

Reply to "shape texture drawer alpha"