有时候为了特定需求或者特殊目的,需要覆盖或者重写某个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. 存储管理(一):openfiler介绍及存储理解

    openfiler是一个免费的.开源的基于浏览器的网络存储产品,支持基于文件的的网络连接存储(NAS)和基于块的存储区域网(SAN).支持的协议有smb,cifs,nfs,http/dev和ftp. ...

  2. 采用Bash脚本性能监控过程

    为一个Linux过程监控,采用Bash脚本. 采用ps命令的过程监控,使用周期加上连续监测的睡眠时间. 使用方法: psmonitor.sh -p [pid] -d [interval] -n [st ...

  3. 详解CMS垃圾回收机制

    原创不易,未经允许,不得转载~~~ 什么是CMS? Concurrent Mark Sweep. 看名字就知道,CMS是一款并发.使用标记-清除算法的gc. CMS是针对老年代进行回收的GC. CMS ...

  4. UIPinchGestureRecognizer 的scale使用

    使用 UIPinchGestureRecognizer 手势可以放大或缩小UIImageView视图.放大或缩小的值是根据 UIPinchGestureRecognizer 的scale决定.这个值在 ...

  5. sqlalchemy操作

    Sqlalchemy ORM操作归类 #简单查询 #注意User是一个类对象,user_table是数据库中的表 #session = sessionmaker() #创建了一个自己定义了的 Sess ...

  6. [置顶] 如何vs在cocos2dx项目中打印中文

    一开始不是很理解,查了半天资料,终于找到解决方法,但是有部分中文还是不能打印出来,如 会出现部分的中文, 一开始都是问号的解决方法是 点击高级保存选项 设置成Unicode(UTF-8无签名) 这样就 ...

  7. MySQL与Oracle的语法区别详细对比 (转)

    Oracle和mysql的一些简单命令对比 1) SQL> select to_char(sysdate,'yyyy-mm-dd') from dual; SQL> select to_c ...

  8. POJ 3264-Balanced Lineup(段树:单点更新,间隔查询)

    Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 34522   Accepted: 16224 ...

  9. veridata实验例(3)验证veridata发现insert操作不会导致同步

    veridata实验例(3)验证veridata发现insert操作不会导致同步 续接:<veridata实验举例(2)验证表BONUS与表SALGRADE两节点同步情况>,地址:点击打开 ...

  10. MySQL 存储过程和函数(转)

    概述 一提到存储过程可能就会引出另一个话题就是存储过程的优缺点,这里也不做讨论,一般别人问我我就这样回答你觉得它好你就用它.因为mysql中存储过程和函数的语法非常接近所以就放在一起,主要区别就是函数 ...