Canvas的方法覆盖和实现新的API

 有时候为了特定需求或者特殊目的，需要覆盖或者重写某个API，在Canvas中，就需要用到CanvasRenderingContext2D这个对象。

CanvasRenderingContext2D为Canvas 提供了丰富的2d绘制函数，当我们需要重写Canvas API的时候，就需要重写这里的方法，下面就以一个例子为证：

  需求：

         为Canvas实现绘制虚线的API:dashedLineTo,这个API的用法类似lineTo,但是使用之前都必须知道上一次绘制的点。这里就需要用一个对象来保存上次moveTo的 点，所以要重写moveTo的API和实现dashedLineToAPI

 

  

  var   moveToFunction = CanvasRenderingContext2D.prototype.moveTo;//保存原生moveTo的引用



CanvasRenderingContext2D.prototype.lastMoveToLocation = {};//保存上一次moveTo的点



CanvasRenderingContext2D.prototype.moveTo = function (x, y) {

   moveToFunction.apply(context, [x,y]);

   this.lastMoveToLocation.x = x;

   this.lastMoveToLocation.y = y;

};



CanvasRenderingContext2D.prototype.dashedLineTo = function (x, y, dashLength) {

   dashLength = dashLength === undefined ? 5 : dashLength;



   var startX = this.lastMoveToLocation.x;

   var startY = this.lastMoveToLocation.y;



   var deltaX = x - startX;

   var deltaY = y - startY;

   var numDashes = Math.floor(Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength);



   for (var i=0; i < numDashes; ++i) {

      this[ i % 2 === 0 ? 'moveTo' : 'lineTo' ]

         (startX + (deltaX / numDashes) * i, startY + (deltaY / numDashes) * i);

   }



   this.moveTo(x, y);

};

 

 

使用的时候直接在context上操作就行了

var context = document.getElementById('canvas').getContext('2d');

context.lineWidth = 3;

context.strokeStyle = 'blue';



context.moveTo(20, 20);

context.dashedLineTo(context.canvas.width-20, 20);

context.dashedLineTo(context.canvas.width-20, context.canvas.height-20);

context.dashedLineTo(20, context.canvas.height-20);

context.dashedLineTo(20, 20);

context.dashedLineTo(context.canvas.width-20, context.canvas.height-20);

context.stroke();