有时候为了特定需求或者特殊目的,需要覆盖或者重写某个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. Django - Django框架 简单介绍

    Django框架 简单介绍 本文地址: http://blog.csdn.net/caroline_wendy/article/details/29172271 1. 介绍 Django是一个开放源码 ...

  2. Python学习路径8——Python对象2

    1.标准型运营商 1.1对象值对照 比较运算符用于如果相同类型的对象是相等.所有的内建类型的是在比较操作中支持,返回布尔比较操作值True 或 False. <span style=" ...

  3. C该程序生成一个唯一的序列号

    在实际的软件开发项目,通常,它包括产生一唯一的序列号.在本文中,一个切实可行的方案,例如,它引入了一个唯一的序列号生成过程. 本文生成的序列号的样式为:MMDDHHMINSS_XXXXXX. 程序例如 ...

  4. Cocos移植Android-Android.mk编译后的文件

    在以前的博客,我们使用的中年cocos工具C和C++源代码可以编译. 其实cocos工具读取<游戏project文件夹>\proj.android\jni\夹Android.mk文件,.A ...

  5. Linux Kernel(Android) 加密算法汇总(四)-应用程序调用OpenSSL加密演算法

    Linux Kernel(Android) 加密算法总结(三)-应用程序调用内核加密算法接口 讲到了怎样调用内核中的接口的方法. 本节主要是介绍怎样Android C/C++应用程序调用Openssl ...

  6. MDCC 2014移动开发者大会 小礼品展商活动

    MDCC 2014移动开发者大会 小礼品展商活动 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGVzdGNzX2Ru/font/5a6L5L2T/fon ...

  7. Test SRM Level Two: CountExpressions, Brute Force

    题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=8157 这道题目跟扑克牌算24的题目比较像,但要简单一些.点击查 ...

  8. 重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示

    原文:重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示 [源码下载] 重新想象 Windows 8 Store Ap ...

  9. WCF-001:WCF的发布

    随着“云”时代的到来,“云”已经无处不在了.什么是“云”,无非就是利用互联网强大的功能建立多个服务器,然后再利用互联网的传输数据的特点将数据从某个服务器中读取出来或者将你的数据上传上去.当然这个服务器 ...

  10. C# Out和Ref区别

    rel是有进有出,out是只出不进 ref 要求参数在传递给函数前要初始化,out则不需要