【绘制】HTML5 Canvas 扩展CanvasRenderingContext2D来增加新属性和方法

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

介绍

假如未来某一天，Canvas标准又通过了CanvasRenderingContext2D的新属性和方法，我们该考虑如何让浏览器实现这个新属性和新方法。

这里，我们用到prototype。

Object.prototype 属性表示 Object 的原型对象。

对于 CanvasRenderingContext2D也不例外，我们通过CanvasRenderingContext2D.prototype的属性

var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');
    //添加新属性
    CanvasRenderingContext2D.prototype.newProperty = '新属性';
    //添加新方法
    CanvasRenderingContext2D.prototype.newFunction = function () {
        console.log('新方法');
    };
    
    //测试新属性
    console.log(context.newProperty);
    //测试新方法
    context.newFunction();

运行后，控制台打印

 所以，通过

CanvasRenderingContext2D.prototype.属性|方法

实现绘图环境对象的扩展。

元编程/猴子补丁

尽管某些开发者认为JavaScript是一门玩具语言（toy language），但事实上，正如上面展示的，它还是很强大的。这节代码所用到的技术有很多种叫法，例如“元编程(metaprogramming)”、“猴子补丁”、“方法覆盖”。意思就是先获取一个对象方法的引用，再重新定义那个方法，在定义新方法的时候有选择地调用原有方法。

你应该注意，尽量不要让自己的“猴子补丁”和未来Canvas规范新加入功能重名，不然会带来很多困扰。