有时候为了特定需求或者特殊目的,需要覆盖或者重写某个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();

Canvas的方法覆盖和实现新的API的更多相关文章

  1. PHP面向对象编程——深入理解方法重载与方法覆盖(多态)

    什么是多态? 多态(Polymorphism)按字面的意思就是“多种状态”.在面向对象语言中,接口的多种不同的实现方式即为多态.引用Charlie Calverts对多态的描述——多态性是允许你将父对 ...

  2. PHP面向对象编程之深入理解方法重载与方法覆盖(多态)

    这篇文章主要介绍了PHP面向对象编程之深入理解方法重载与方法覆盖(多态)的相关资料,需要的朋友可以参考下: 什么是多态? 多态(Polymorphism)按字面的意思就是"多种状态" ...

  3. c#和java中的方法覆盖——virtual、override、new

    多态和覆盖 多态是面向对象编程中最为重要的概念之一,而覆盖又是体现多态最重要的方面.对于像c#和java这样的面向对象编程的语言来说,实现了在编译时只检查接口是否具备,而不需关心最终的实现,即最终的实 ...

  4. 方法重载(overroad)和方法覆盖(override)------java基础知识总结

    a.什么是方法重载?(同一个类中)方法重载是指在同一个类中,出现方法名相同,参数列表不同的情况. b.什么是方法覆盖?(子父类中)方法覆盖是指在子类中,出现和父类一模一样的方法声明的时候,会运行子类的 ...

  5. flutter自定义View(CustomPainter) 之 canvas的方法总结

    画布canvas 画布是一个矩形区域,我们可以控制其每一像素来绘制我们想要的内容 canvas 拥有多种绘制点.线.路径.矩形.圆形.以及添加图像的方法,结合这些方法我们可以绘制出千变万化的画面. 虽 ...

  6. java中的方法覆盖(Overriding)和方法重载(Overloading)是什么意思?重写跟重载的区别?

    java中的方法重载发生在同一个类里面两个或者多个方法的方法名相同但是参数不同的情况.与此相对,方法覆盖是说子类重新定义了父类的方法.方法覆盖必须有相同的方法名,参数列表和返回类型. 覆盖者可能不会限 ...

  7. 几种获取IP 根据IP获取地址的方法 JS,第三方 新浪 网易 腾讯

    第一种是利用纯真ip数据库,这个可以在网上找到很多,缺点是更新有点慢. 第二种是利用门户网站的接口 目前已知的有腾讯.新浪.网易.搜狐和Google提供IP地址查询API,但是找得到的只有腾讯.新浪和 ...

  8. Java 方法覆盖和方法重载

    方法重载(overloaded),要求方法的名称相同,参数列表不相同. 方法覆盖(override),要求①方法名相同,②参数列表相同,③返回值相同 如果是方法覆盖,要注意以下几种情况: 1.子类方法 ...

  9. 方法覆盖(override)”的要点

    方法覆盖要求子类与父类的方法一模一样,否则就是方法重载(overload)!请自行编写代码测试以下特性:在子类中,若要调用父类中被覆盖的方法,可以使用super关键字. 结论:          在“ ...

随机推荐

  1. linux--关于shell的介绍

    下面是最近学习shell的一些知识点总结***博客园-邦邦酱好*** 1.什么是shell(1)Shell将我们输入的指令与Kernel沟通,好让Kernel可以控刢硬件来正确无误地工作.(2)我们总 ...

  2. linux su,sudo命令

    linux su 命令 建议大家切换用户的时候 使用 su - root 这样,否则可能发现某些命令执行不了 关于su .su - 及 sudo的区别 请往下看 1.命令作用 su的作用是变更为其它使 ...

  3. java 类 及其 执行过程

    java 类 命名 java类文件中  只能有一个公开类  且 公开类类名与当前类文件的文件名一致 方法如果使用了static修饰,那么此方法是类方法,可以 类名.方法名 使用. 你的main方法在同 ...

  4. Cocos2d-x Layout简单使用

    1. Text* alert = Text::create("Layout", "fonts/Marker Felt.ttf", 30 ); alert-> ...

  5. 疯狂Java学习笔记(84)----------大约 Java 对象序列化,你不知道 5 事

    几年前,.当一个软件团队一起用 Java 书面申请.我认识比一般程序猿多知道一点关于 Java 对象序列化的知识所带来的优点. 关于本系列 您认为自己懂 Java 编程?其实,大多数程序猿对于 Jav ...

  6. iSwifting如何发送照片社区

    登录iSwifting社区 1,首先点击"帖子": 2,点击"照片": 3.点击"选择文件上传" 4,上传后的照片: 5,点击上传的照片: ...

  7. C3P0在多线程下的maxPoolSize配置

    ETL工具完毕的差点儿相同了.今天遇到一个问题.就是给C3P0配置了maxPoolSize为10.目的是想让整个应用同一时候获得的最大的Connection个数为10,可是在測试应用的这一部分之后,发 ...

  8. effective c++ 条款5 c++ 默默实现的函数

    当写一个空类c++ 会为我们自动提供四个函数 1 默认构造函数 2 默认析构函数 3 拷贝构造函数 4 默认赋值运算符

  9. android 他们定义对话框

    创建一个布局文件 my_dialog.xml <?xml version="1.0" encoding="utf-8"?> <Relative ...

  10. Hdu 3341 Lost&#39;s revenge (ac+自己主动机dp+hash)

    标题效果: 举个很多种DNA弦,每个字符串值值至1.最后,一个长字符串.要安排你最后一次另一个字符串,使其没事子值和最大. IDEAS: 首先easy我们的想法是想搜索的!管她3721..直接一个字符 ...