突破canvas语法限制 让他支持链式语法


Posted in HTML / CSS onDecember 24, 2012

先来看一段正常的canvas画图语法:

复制代码
代码如下:

ctx.arc(centerX,centerY,radius,0,PI*2,true);
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = "10";
ctx.fill();
ctx.beginPath();
ctx.shadowColor = 'rgba(0,0,0,0)';
ctx.moveTo(centerX-radius,centerY);
ctx.lineTo(centerX-radius,centerY - 50);
ctx.lineTo(centerX+radius,centerY - 50);
ctx.lineTo(centerX+radius,centerY);
// ctx.lineTo(centerX-radius,centerY);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgba(255,0,0,1)';
ctx.arc(centerX,centerY-50,radius,0,PI*2,true);
ctx.fill();

我对canvas原生语法不爽的有两点:1是每句前面都有写ctx(即canvas的context2d对象),2是每个函数或属性都要占一行,浪费空间。

我对jQuery的链式语法很欣赏,比如:

复制代码
代码如下:

$('#div1').show(300).html(p).delay(3000).slideUp(300).remove();

所以,我也想用这种语法来进行canvas绘图:
复制代码
代码如下:

ctx.moveTo(500,0).lineTo(500,500).strokeStyle('#f00').stroke();

有个办法就是模拟一个context2d对象,这个对象支持所有的原生context2d方法,但又支持链式。

不过,代码不能太多,多了就没人喜欢用了。

下面就是完整的代码段,这个“类”我取名为XtendCanvas(又是以X开头的哟):

复制代码
代码如下:

// 让canvas支持链式语法,来自十年灯
~function () {var pro = ['save','restore', 'scale', 'rotate', 'translate', 'transform', 'createLinearGradient', 'createRadialGradient', 'getLineDash', 'clearRect', 'fillRect', 'beginPath', 'closePath', 'moveTo', 'lineTo', 'quadraticCurveTo', 'bezierCurveTo', 'arcTo', 'rect', 'arc', 'fill', 'stroke', 'clip', 'isPointInPath', 'measureText', 'clearShadow', 'fillText', 'strokeText', 'strokeRect', 'drawImage', 'drawImageFromRect', 'putImageData', 'createPattern', 'createImageData', 'getImageData', 'lineWidth','strokeStyle','globalAlpha','fillStyle','font','shadowOffsetX','shadowOffsetY','shadowBlur','shadowColor','lineCap','lineJoin','miterLimit'];
function XtendCanvas (canvas) {

var ctx = canvas.getContext('2d'),
fn = function(){},
fnP = fn.prototype;
for(var j = 0,p=pro[0];p;p=pro[j++]) {
fn.prototype[p] = function (p) {
return function () {
var args = Array.prototype.slice.call(arguments);
// console.log(args);
if(typeof ctx[p] == 'function') {
ctx[p].apply(ctx,args);
} else {
ctx[p] = args+'';
}
return fnP;
};
}(p);
}
return new fn;
};
window.XtendCanvas = XtendCanvas;
}();


使用方法很简单,给他传一个canvas对象,他就会返回一个类似context2d的对象,你可以像普通的context2d一样使用,但不同的是,他支持链式语法了:
复制代码
代码如下:

var cvs = document.getElementById('cvs');
var ctx = XtendCanvas(cvs);
ctx.moveTo(500,0).lineTo(500,500).strokeStyle('#f00').stroke();

这样一来你就可以把所有操作都放在一句话里,你也可以随时中断,做其他的事,然后继续。

这段代码并不是对canvas的增强,只是单纯的让他支持链式语法了。但胜在代码少,可以嵌入到任何JS库中,在此我希望能得到你的一个“推荐”

代码中肯定有值得改进的地方,大家可以自行完善。但——吃水不忘挖井人,希望大家记得我,最重要的是思路,对吧?下面就是思路:
大家可以看到,代码中最长的部分,是那个保存方法名的数组pro,核心代码反而很短。为什么我要建这么一个数组呢?

本来我也想直接从CanvasRenderingContext2D继承所有原生方法,但每个浏览器下面遍历这个CanvasRenderingContext2D,结果都不一致。如果我把他们直接继承,那么当你想用chrome中的方法套在firefox里执行,就会报错。

所以我只是把CanvasRenderingContext2D中的通用的,无异议的方法与属性名提取了出来,没办法,只有建一个固定的数组——大家可以自行决定往里面添加你的方法。

方法与属性提取出来了,接着就是把原生的方法加在我的新对象上。我建了一个叫fn的空函数,放置我的方法。

由于数组中的这些元素既有函数,也有属性,所以我在循环中判断了他是否是一个函数,如果是函数,就带参数执行;不是函数——那么就肯定是属性了,就把参数赋给这个属性。

这样大家在碰到设置canvas属性的时候,就不用中断链了,直接把属性值当参数传进去就行了,比如:

复制代码
代码如下:

ctx.strokeStyle('#f00')

最后,关键的关键,就是返回fn,这招是从jQuery学来的,是支持链式语法的关键。

这段中用到了匿名函数,闭包,原型,以及我以前文章讲过的奇怪的for循环。

说起来好像挺简单的,不过我实在是想了很久,希望对大家有用。

在写代码的过程中,我发现chrome的做法很不错,他有一串以set开头的函数,如setStrokeColor,setLineCap等函数,给他们传参数,就可以替代对应的strokeStyle和lineCap等属性,也就是说,他的canvas里面就全是函数而没有属性了那样的话我就不用判断是函数还是是属性了。但firefox里面没有这些,所以我还是只能用前面的思路。

我也把那一串set函数给放出来吧

复制代码
代码如下:

var bak = ['setTransform','setAlpha', 'setCompositeOperation', 'setLineWidth', 'setLineCap', 'setLineJoin', 'setMiterLimit', 'setLineDash','setShadow','setStrokeColor','setFillColor'];

他们的用处一看就懂。你也可以选择一些加入前面代码的pro数组中。

最后,我很奇怪我的代码怎么会没有高亮了。。。如果你都看到最后了,那么还是给个推荐吧,让我也虚荣一把

HTML / CSS 相关文章推荐
CSS3 display知识详解
Nov 25 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 #HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 #HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 #HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 #HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 #HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 #HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 #HTML / CSS
You might like
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
js实现的常用的左侧导航效果
2013/10/17 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
vue生命周期实例小结
2018/08/15 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
用Python抢过年的火车票附源码
2015/12/07 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
pandas 选择某几列的方法
2018/07/03 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
python flask安装和命令详解
2019/04/02 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
公司自我介绍演讲稿
2014/08/21 职场文书
企业员工辞职信范文
2015/05/12 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书