如何使用相同的原型继承 javascript oops 中的公共属性？

Question

Here is the full code:
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="D:\jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/iamphill/Bootstrap-Offcanvas/master/dist/css/bootstrap.offcanvas.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>oops2</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .navHeight {
            height: 198px;
            !important
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        #paint {
            overflow: scroll;
            width: 100%;
            height: 100%;
            !important
        }
        #sketch {
            border: 10px dashed gray;
            height: 100%;
            position: relative;
        }
        #tmp_canvas {
            position: absolute;
            left: 0px;
            right: 0;
            bottom: 0;
            top: 0;
            cursor: crosshair;
            width: 100%;
            height: 100%;
            !important
        }
    </style>
</head>

<body class="body-offcanvas" onload="init()">



    <header class="clearfix">
        <div class="row navigation-bar">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas">
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>

                    <nav class="navbar navbar-inverse navbar-fixed-bottom navbar-offcanvas navbar-offcanvas-touch navHeight" role="navigation" id="js-bootstrap-offcanvas">
                        <div class="container-fluid">
                            <ul class="nav navbar-nav">

                                <li>
                                    <b style="color:grey;"> &nbsp; circle</b>
                                    <br> &nbsp;&nbsp;
                                    <button onclick="circle()" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-copyright-mark"></span>
                                    </button>
                                </li>

                                <li><b style="color:grey;">rectangle</b>
                                    <br> &nbsp; &nbsp;
                                    <button onclick="rectangle()" class="btn btn-info">
                                        <span class="glyphicon glyphicon-stop"></span>
                                    </button>
                                </li>

                                <li><b style="color:grey;">&nbsp;pencil</b>
                                    <br> &nbsp;&nbsp;
                                    <button onclick="pen()" class="btn btn-success">
                                        <span class="glyphicon glyphicon-pencil"></span>
                                    </button>
                                </li>

                                <li><b style="color:grey;">&nbsp;save</b>
                                    <br> &nbsp;&nbsp;
                                    <button onclick="onSave()" class="btn btn-info">
                                        <span class="glyphicon glyphicon-save"></span>
                                    </button>
                                </li>

                                <li><b style="color:grey;">&nbsp;&nbsp;clear</b>
                                    <br> &nbsp;&nbsp;
                                    <button id="clear" onclick="erase()" class="btn btn-warning">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </button>
                                </li>
                            </ul>


                            &nbsp;&nbsp;
                            <label for="pencil" style="color:grey;">Pencil</label>
                            <input id="pencil" type="radio" name="tool" value="pencil" checked="checked">
                            <label for="eraser" style="color:grey;">Eraser</label>
                            <input id="eraser" type="radio" name="tool" value="eraser">
                            <br>
                            <br>
                            <h3 style="color:grey;">choose colours</h3>
                            <div id="blue" onclick="color(this)"></div>
                            <div id="orange" onclick="color(this)"></div>
                            <div id="black" onclick="color(this)"></div>
                            <div id="green" onclick="color(this)"></div>

                            <label style="color:grey;">select File <span class="glyphicon glyphicon-file"></span>:</label>
                            <input type="file" id="tmp_canvas" name="imageLoader" style="position:relative;top=3%;right:30%;" class="img-responsive" />
                        </div>
                </div>

                </nav>
            </div>
    </header>

    <div id="sketch">
        <canvas id="paint"></canvas>
    </div>

    <script>
var canvas, ctx, w, h;
var selectedcolor = "black";
var width, height;
canvas = document.querySelector('#paint');
ctx = canvas.getContext('2d');

var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));


// Creating a tmp canvas
var tmp_canvas = document.createElement('canvas');
var tmp_ctx = tmp_canvas.getContext('2d');
tmp_canvas.id = 'tmp_canvas';
tmp_canvas.width = canvas.width;
tmp_canvas.height = canvas.height;

var mouse =
{
   x : 0,
   y : 0
}
;
var start_mouse =
{
   x : 0,
   y : 0
}
;
var last_mouse =
{
   x : 0,
   y : 0
}
;


var imageLoader = document.getElementById('tmp_canvas');
imageLoader.addEventListener('change', handleImage, false);

// load image
function handleImage(e)
{
   var reader = new FileReader();
   reader.onload = function (event)
   {
      var img = new Image();
      img.onload = function ()
      {
         img.width = canvas.width;
         img.height = canvas.height;
         ctx.drawImage(img, 0, 0);
      }
      img.src = event.target.result;
   }
   reader.readAsDataURL(e.target.files[0]);
}

// save image
function onSave()
{
   var img = canvas.toDataURL("image/png");
   document.write('<img src="' + img + '"/>');
}

function init()
{
   canvas = document.getElementById('paint');
   ctx = canvas.getContext("2d");
   w = canvas.width;
   h = canvas.height;

}
// To select a color
function color(obj)
{
   switch (obj.id)
   {
      case "blue" :
         selectedcolor = "blue";
         break;
      case "orange" :
         selectedcolor = "orange";
         break;
      case "black" :
         selectedcolor = "black";
         break;
      case "green" :
         selectedcolor = "green";
         break;
   }
}


function erase()
{
   var m = confirm("Want to clear");
   if (m)
   {
      ctx.clearRect(0, 0, w, h);
   }
}

//这里是我想继承的矩形和圆形的代码函数形状（lineWidth，lineJoin，lineCap，strokeStyle，fillStyle）{ this.lineWidth = 线宽； this.lineJoin = 连线； this.lineCap = 线头; this.strokeStyle = 笔画样式； this.fillStyle = 填充样式； }

// rectangle
function rectangle()
{
   sketch.appendChild(tmp_canvas);
   /* Mouse Capturing Work */
   tmp_canvas.addEventListener('mousemove', function (e)
   {
      mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
      mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
   }, false);

   tmp_canvas.addEventListener('mousedown', function (e)
   {
      tmp_canvas.addEventListener('mousemove', onPaint1, false);

      mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
      mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;

      start_mouse.x = mouse.x;
      start_mouse.y = mouse.y;

      onPaint1();
   }, false);

   tmp_canvas.addEventListener('mouseup', function ()
   {
      tmp_canvas.removeEventListener('mousemove', onPaint1, false);

      // Writing down to real canvas now
      ctx.drawImage(tmp_canvas, 0, 0);
      document.getElementById('clear').addEventListener('click', function ()
      {
         tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
         ctx.clearRect(0, 0, canvas.width, canvas.heigh);
      }, false);

   }, false);

   var onPaint1 = function ()
   {
      tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
      var x = Math.min(mouse.x, start_mouse.x);
      var y = Math.min(mouse.y, start_mouse.y);
      var width = Math.abs(mouse.x - start_mouse.x);
      var height = Math.abs(mouse.y - start_mouse.y);
      tmp_ctx.strokeRect(x, y, width, height);

   };

}

//我添加的这行代码继承 rectangle.prototype= 新形状(8, "round","round",selectedcolor,selectedcolor);

// circle
function circle()
{

   sketch.appendChild(tmp_canvas);

   /* Mouse Capturing Work */
   tmp_canvas.addEventListener('mousemove', function (e)
   {
      mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
      mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
   }, false);

   tmp_canvas.addEventListener('mousedown', function (e)
   {
      tmp_canvas.addEventListener('mousemove', onPaint, false);

      mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
      mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;

      start_mouse.x = mouse.x;
      start_mouse.y = mouse.y;

      onPaint();
   }, false);

   tmp_canvas.addEventListener('mouseup', function ()
   {
      tmp_canvas.removeEventListener('mousemove', onPaint, false);
      // Writing down to real canvas now
      ctx.drawImage(tmp_canvas, 0, 0);
      document.getElementById('clear').addEventListener('click', function ()
      {
         tmp_ctx.arc(mouse.x, mouse.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, ! 0);
         tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
         ctx.clearRect(0, 0, canvas.width, canvas.heigh);
      }, false);
   }, false);

   var onPaint = function ()
   {
      tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
      var x = (mouse.x + start_mouse.x) / 2;
      var y = (mouse.y + start_mouse.y) / 2;

      var radius = Math.max(Math.abs(mouse.x - start_mouse.x),
      Math.abs(mouse.y - start_mouse.y)) / 2;

      tmp_ctx.beginPath();
      tmp_ctx.arc(x, y, radius, 0, Math.PI * 2, false);
      tmp_ctx.stroke();
      tmp_ctx.closePath();

   };
}
circle.prototype= new shape(8, "round", "round",selectedcolor,selectedcolor);

(function ()
{
   // Determine Tool
   var tool = 'pencil';
   document.querySelector('#pencil').onchange = function ()
   {
      if (this.checked)
      tool = 'pencil';

      // Show Tmp Canvas
      tmp_canvas.style.display = 'block';
   }
   ;
   document.querySelector('#eraser').onchange = function ()
   {
      if (this.checked)
      tool = 'eraser';

      // Hide Tmp Canvas
      tmp_canvas.style.display = 'none';
   }
   ;
   sketch.appendChild(tmp_canvas);

   // Pencil Points
   var ppts = [];

   /* Mouse Capturing Work */
   tmp_canvas.addEventListener('mousemove', function (e)
   {
      mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
      mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
   }
   , false);

   canvas.addEventListener('mousemove', function (e)
   {
      mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
      mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
   }
   , false);


   /* Drawing on Paint App */
   tmp_ctx.lineWidth = 5;
   tmp_ctx.lineJoin = 'round';
   tmp_ctx.lineCap = 'round';
   tmp_ctx.strokeStyle = selectedcolor;
   tmp_ctx.fillStyle = selectedcolor;

   tmp_canvas.addEventListener('mousedown', function (e)
   {
      tmp_canvas.addEventListener('mousemove', onPaint, false);

      mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
      mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;

      ppts.push(
      {
         x : mouse.x,
         y : mouse.y
      }
      );

      onPaint();
   }
   , false);

   tmp_canvas.addEventListener('mouseup', function ()
   {
      tmp_canvas.removeEventListener('mousemove', onPaint, false);

      ctx.globalCompositeOperation = 'source-over';

      // Writing down to real canvas now
      ctx.drawImage(tmp_canvas, 0, 0);
      // Clearing tmp canvas
      tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

      // Emptying up Pencil Points
      ppts = [];
   }
   , false);

   var onPaint = function ()
   {

      // Saving all the points in an array
      ppts.push(
      {
         x : mouse.x,
         y : mouse.y
      }
      );

      if (ppts.length < 3)
      {
         var b = ppts[0];
         tmp_ctx.beginPath();
         // ctx.moveTo(b.x, b.y);
         // ctx.lineTo(b.x + 50, b.y + 50);
         tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, ! 0);
         tmp_ctx.fill();
         tmp_ctx.closePath();

         return;
      }

      // Tmp canvas is always cleared up before drawing.
      tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

      tmp_ctx.beginPath();
      tmp_ctx.moveTo(ppts[0].x, ppts[0].y);

      for (var i = 1; i < ppts.length - 2; i ++ )
      {
         var c = (ppts[i].x + ppts[i + 1].x) / 2;
         var d = (ppts[i].y + ppts[i + 1].y) / 2;

         tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
      }

      // For the last 2 points
      tmp_ctx.quadraticCurveTo(
      ppts[i].x,
      ppts[i].y,
      ppts[i + 1].x,
      ppts[i + 1].y
      );
      tmp_ctx.stroke();

   };
   canvas.addEventListener('mousedown', function (e)
   {
      canvas.addEventListener('mousemove', onErase, false);

      mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
      mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;

      ppts.push(
      {
         x : mouse.x,
         y : mouse.y
      }
      );

      onErase();
   }
   , false);

   canvas.addEventListener('mouseup', function ()
   {
      canvas.removeEventListener('mousemove', onErase, false);

      // Emptying up Pencil Points
      ppts = [];
   }
   , false);

   var onErase = function ()
   {

      // Saving all the points in an array
      ppts.push(
      {
         x : mouse.x,
         y : mouse.y
      }
      );

      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillStyle = 'rgba(0,0,0,1)';
      ctx.strokeStyle = 'rgba(0,0,0,1)';
      ctx.lineWidth = 5;

      if (ppts.length < 3)
      {
         var b = ppts[0];
         ctx.beginPath();
         ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, ! 0);
         ctx.fill();
         ctx.closePath();

         return;
      }
      ctx.beginPath();
      ctx.moveTo(ppts[0].x, ppts[0].y);

      for (var i = 1; i < ppts.length - 2; i ++ )
      {
         var c = (ppts[i].x + ppts[i + 1].x) / 2;
         var d = (ppts[i].y + ppts[i + 1].y) / 2;

         ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
      }

      // For the last 2 points
      ctx.quadraticCurveTo(
      ppts[i].x,
      ppts[i].y,
      ppts[i + 1].x,
      ppts[i + 1].y
      );
      ctx.stroke();

   }
   ;

}
)();
// pen tool
function pen()
{
   sketch.appendChild(tmp_canvas);
   // Pencil Points
   var ppts = [];

   /* Mouse Capturing Work */
   tmp_canvas.addEventListener('mousemove', function (e)
   {
      mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
      mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
   }
   , false);
   tmp_canvas.addEventListener('mousedown', function (e)
   {
      tmp_canvas.addEventListener('mousemove', onPaint, false);

      mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
      mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;

      ppts.push(
      {
         x : mouse.x,
         y : mouse.y
      }
      );

      onPaint();
   }
   , false);

   tmp_canvas.addEventListener('mouseup', function ()
   {
      tmp_canvas.removeEventListener('mousemove', onPaint, false);

      // Writing down to real canvas now
      ctx.drawImage(tmp_canvas, 0, 0);
      // Clearing tmp canvas
      tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

      // Emptying up Pencil Points
      ppts = [];
   }
   , false);

   var onPaint = function ()
   {

      // Saving all the points in an array
      ppts.push(
      {
         x : mouse.x,
         y : mouse.y
      }
      );

      if (ppts.length < 3)
      {
         var b = ppts[0];
         tmp_ctx.beginPath();
         tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, ! 0);
         tmp_ctx.fill();
         tmp_ctx.closePath();

         return;
      }

      // Tmp canvas is always cleared up before drawing.
      tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

      tmp_ctx.beginPath();
      tmp_ctx.moveTo(ppts[0].x, ppts[0].y);

      for (var i = 1; i < ppts.length - 2; i ++ )
      {
         var c = (ppts[i].x + ppts[i + 1].x) / 2;
         var d = (ppts[i].y + ppts[i + 1].y) / 2;

         tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
      }

      // For the last 2 points
      tmp_ctx.quadraticCurveTo(
      ppts[i].x,
      ppts[i].y,
      ppts[i + 1].x,
      ppts[i + 1].y
      );
      tmp_ctx.stroke();

   };
}
pen.prototype=new shape(8,"round","round",selectedcolor,selectedcolor);
    </script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/iamphill/Bootstrap-Offcanvas/master/dist/js/bootstrap.offcanvas.min.js"></script>
</body>

</html>

Answer 1

function shape(lineWidth , lineJoin , lineCap , strokeStyle ,fillStyle ) {
    this.lineWidth = lineWidth ;
    this.lineJoin = lineJoin ;
    this.lineCap = lineCap ;
    this.strokeStyle = strokeStyle ;
 this.fillStyle = fillStyle ;
}

这些被称为js prototypes.You 可以将它们用作-->

var circle= new shape("5", "round", "round",selectedcolor,selectedcolor);
var rectangle= new shape("8", "round", "round",selectedcolor,selectedcolor);

然后您可以访问任何属性您想要的 circle.lineWidth 等等

如何使用相同的原型继承 javascript oops 中的公共属性？

How to inherit common properties in javascript oops using same prototype?

javascript

javascript-objects