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

//这行代码是我为继承而添加的 矩形。原型=新形状8，圆形，圆形，selectedcolor，selectedcolor

// 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);

   };

}

这些称为js原型。您可以将其用作->

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

---

然后你可以访问任何你想要的属性，比如circle.lineWidth等等

你的圆和矩形原型在哪里？什么是tmp_ctx？它是在哪里初始化的？这是画布实例，现在我已经编辑并上传了完整的代码，看看它

// 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>

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

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