The text below is selected, press Ctrl+C to copy to your clipboard. (⌘+C on Mac) No line numbers will be copied.
Guest
MyCode
By Guest on 16th May 2019 05:11:11 AM | Syntax: TEXT | Views: 30



New paste | Download | Show/Hide line no. | Copy text to clipboard
  1. <html>
  2. <head>
  3.  
  4.   <meta charset="UTF-8">
  5.   <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  6.   <meta name="author" content="Manasan">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <link rel="stylesheet" type="text/css" href="index.css">
  9. <!-- <style src="/index.css" hh type="text/css"></style> -->
  10. <script src="index.js" type="text/javascript"></script>
  11.  
  12.     <script type="text/javascript">
  13.  
  14.     var canvas, canvasimg, backgroundImage, finalImg;
  15.     var mouseClicked = false;
  16.     var prevX = 0;
  17.     var currX = 0;
  18.     var prevY = 0;
  19.     var currY = 0;
  20.     var fillStyle = "black";
  21.     var globalCompositeOperation = "source-over";
  22.     var lineWidth  = 2;
  23.     var x1  = 0;
  24.     var y1  = 0;
  25.     var theta =0 ;    
  26.    
  27.  
  28.     function init() {
  29.       // var imageSrc = '/abstract-geometric-pattern_23-2147508597.jpg'
  30.       // backgroundImage = new Image();
  31.       // backgroundImage.src = imageSrc;
  32.       canvas = document.getElementById('can');
  33.       // finalImg = document.getElementById('finalImg');
  34.       // canvasimg = document.getElementById('canvasimg');
  35.       // canvas.style.backgroundImage = "url('" + imageSrc + "')";
  36.       canvas.addEventListener("mousemove", handleMouseEvent);
  37.       canvas.addEventListener("mousedown", handleMouseEvent);
  38.       canvas.addEventListener("mouseup", handleMouseEvent);
  39.       canvas.addEventListener("mouseout", handleMouseEvent);
  40.       canvas.addEventListener("touchstart", handleMouseEvent);
  41.       canvas.addEventListener("touchmove", handleMouseEvent, false);
  42.       canvas.addEventListener("touchend", handleMouseEvent, false);
  43.       canvas.addEventListener("touchcancel", handleMouseEvent, false);
  44.  
  45.       var bodyH=screen.height;
  46.       var bodyW=screen.width;
  47.        canH=document.getElementById('can');
  48.        canW=document.getElementById('can');
  49.       if (bodyW>bodyH){canH.style.marginTop ='5%';canH.style.marginLeft ='25%';canW.width=canH.height=bodyH*90/100;canH=canH.height;canW=canW.width; r1=canH*90/100/2; r2=canH*60/100/2; }
  50.       else{canH.style.marginLeft ='5%';canH.style.marginTop ='25%';canH.height=canW.width=bodyW*(90/100);canH=canH.height;canW=canW.width; r1=canW*90/100/2; r2=canW*60/100/2;}
  51.      
  52.       //var r1=canW*90/100;var r2=canW*60/100;
  53.       // if (canW>canH) r1=canH*90/100;r2=canH*60/100;
  54.        ctx = canvas.getContext("2d");
  55.       ctx.beginPath();
  56.       ctx.arc(canW/2, canH/2, r1, 0, 2 * Math.PI, false);
  57.       ctx.moveTo(canW/2+r2,canH/2)
  58.       ctx.arc(canW/2, canH/2, r2, 0, 2 * Math.PI, false);
  59.       ctx.stroke();
  60.     }
  61.  
  62.     function getColor(btn) {
  63.       globalCompositeOperation = 'source-over';
  64.       lineWidth = 2;
  65.       switch (btn.getAttribute('data-color')) {
  66.         case "green":
  67.         fillStyle = "green";
  68.         break;
  69.         case "blue":
  70.         fillStyle = "blue";
  71.         break;
  72.         case "red":
  73.         fillStyle = "red";
  74.         break;
  75.         case "yellow":
  76.         fillStyle = "yellow";
  77.         break;
  78.         case "orange":
  79.         fillStyle = "orange";
  80.         break;
  81.         case "black":
  82.         fillStyle = "black";
  83.         break;
  84.         case "eraser":
  85.         globalCompositeOperation = 'destination-out';
  86.         fillStyle = "rgba(0,44,0,1)";
  87.         lineWidth = 14;
  88.         break;
  89.       }
  90.  
  91.     }
  92.  
  93.     function draw(dot) {
  94.       console.log(dot);
  95.       ctx = canvas.getContext("2d");
  96.       ctx.beginPath();
  97.       ctx.globalCompositeOperation = globalCompositeOperation;
  98.         cx=canW/2;cy=canH/2;ex=currX;ey=currY
  99.       var dy = ey - cy;
  100.       var dx = ex - cx;
  101.       theta = Math.atan2(dy, dx); // range (-PI, PI]
  102.       theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
  103.       if (theta < 0) theta +=360;
  104.      theta *= Math.PI / 180;
  105.      x1 = canW/2;
  106.      y1 = canH/2;
  107.      //theta = 0.5;
  108.      // ctx.moveTo(x1, y1);
  109.      ctx.moveTo(x1 + r1 * Math.cos(theta), y1 + r1 * Math.sin(theta));
  110.      ctx.lineTo(x1 + r2 * Math.cos(theta), y1 + r2 * Math.sin(theta))
  111.      if(Math.sqrt((currX-x1)**2+(currY-y1)**2)>r2 && Math.sqrt((currX-x1)**2+(currY-y1)**2)<r1) ctx.stroke();      // range [0, 360)
  112.        
  113.             document.getElementById('e2').innerText=Math.sqrt((currX-x1)**2+(currY-y1)**2)
  114.             // if(dot){
  115.             //   ctx.fillStyle = fillStyle;
  116.             //   ctx.fillRect(currX, currY, 2, 2);
  117.             // } else {
  118.             //   ctx.beginPath();
  119.             //   ctx.moveTo(prevX, prevY);
  120.             //   ctx.lineTo(currX, currY);
  121.             //   ctx.strokeStyle = fillStyle;
  122.             //   ctx.lineWidth = lineWidth;
  123.             //   ctx.stroke();
  124.             // }
  125.             ctx.closePath();
  126.           }
  127.  
  128.     function erase() {
  129.       if (1) {
  130.         var ctx = canvas.getContext("2d");
  131.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  132.        document.getElementById("canvasimg").style.display = "none";
  133.       }
  134.     }
  135.  
  136.     function save() {
  137.       canvas.style.border = "2px solid";
  138.       canvasimg.width = canvas.width;
  139.       canvasimg.height = canvas.height;
  140.       var ctx2 = canvasimg.getContext("2d");
  141.       // comment next line to save the draw only
  142.       ctx2.drawImage(backgroundImage, 0, 0);
  143.       ctx2.drawImage(canvas, 0, 0);
  144.       finalImg.src = canvasimg.toDataURL();
  145.       finalImg.style.display = "inline";
  146.     }
  147.  
  148.     function handleMouseEvent(e) {
  149.         e.preventDefault();console.log(e.type);
  150.       if ((e.type === 'mousedown' ) ||  (e.type === 'touchstart' ) )
  151.       {
  152.         prevX = currX;
  153.         prevY = currY;
  154.         currX = e.offsetX;
  155.         currY = e.offsetY;
  156.         mouseClicked = true;
  157.         draw(true);
  158.       }
  159.       if (e.type === 'mouseup' || e.type === "mouseout") {
  160.         mouseClicked = false;
  161.       }
  162.       if (e.type === 'mousemove') {  
  163.                ctx.beginPath();ctx.save();
  164.       ctx.arc(canW/2, canH/2, r1, 0, 2 * Math.PI, false);
  165.       ctx.lineWidth = 2
  166.       ctx.stroke()
  167.       ctx.moveTo(canW/2+r2,canH/2)
  168.       ctx.arc(canW/2, canH/2, r2, 0, 2 * Math.PI, false);
  169.       ctx.fillStyle = "white";
  170.       ctx.fill();
  171.       ctx.moveTo(canW/2+r2,canH/2)
  172.       ctx.arc(canW/2, canH/2, r2, 0, 2 * Math.PI, false);
  173.       ctx.stroke();
  174.           currX = e.offsetX;
  175.           currY = e.offsetY;
  176.         if(Math.sqrt((e.offsetX-canW/2)**2+(e.offsetY-canH/2)**2)>r2 && Math.sqrt((e.offsetX-canW/2)**2+(e.offsetY-canH/2)**2)<r1) {console.log(e.offsetX,e.offsetY);draw();} else
  177.         if (mouseClicked) {
  178.           prevX = currX;
  179.           prevY = currY;
  180.           currX = e.offsetX;
  181.           currY = e.offsetY;
  182.           draw();
  183.         }
  184.       }
  185.     }
  186.     </script></head>
  187.    
  188.     <body onload="init()">
  189.  
  190.       <canvas id="can" class="center" frameborder="0"  marginheight="0" marginwidth="0" >
  191.       </canvas>
  192.       <div style="position:absolute;top:12%;left:43%;">Choose Color</div>
  193.       <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" data-color="green" onclick="getColor(this)"></div>
  194.       <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" data-color="blue" onclick="getColor(this)"></div>
  195.       <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" data-color="red" onclick="getColor(this)"></div>
  196.       <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" data-color="yellow" onclick="getColor(this)"></div>
  197.       <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" data-color="orange" onclick="getColor(this)"></div>
  198.       <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" data-color="black" onclick="getColor(this)"></div>
  199.       <div style="position:absolute;top:20%;left:43%;" id="e2">Eraser</div>
  200.      
  201.       <canvas id="canvasimg" style="display:none;" ></canvas>
  202.       <img id="finalImg" style="position:absolute;top:10%;left:52%;display:none;" >
  203.       <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:5%;left:10%;">
  204.       <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:5%;left:15%;">
  205.     </body>
  206.     </html>



  • Recent Pastes