科技新闻~typenameen~
  • 行业动态
  • 提升canvas英语的语法限定 让他适用链条式英语的

    日期:2020-09-17 类型:科技新闻 

    关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

    先看来1段一切正常的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⑸0,radius,0,PI*2,true);
    ctx.fill();

    我对canvas原生态英语的语法不爽的有两点:1是每句前面都有写ctx(即canvas的context2d目标),2是每一个涵数或特性都要占1行,消耗室内空间。

    我对jQuery的链条式英语的语法很赏析,例如:

    拷贝编码
    编码以下:

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

    因此,我也想用这类英语的语法来开展canvas制图

    拷贝编码
    编码以下:

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

    有个方法便是仿真模拟1个context2d目标,这个目标适用全部的原生态context2d方式,但又适用链条式。

    但是,编码不可以太多,多了就没人喜爱用了。

    下面便是详细的编码段,这个“类”我取名字为XtendCanvas(又是以X开始的哟):

    拷贝编码
    编码以下:

    // 让canvas适用链条式英语的语法,来自10年灯
    ~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;
    }();

    应用方式很简易,给他传1个canvas目标,他就会回到1个相近context2d的目标,你能够像一般的context2d1样应用,但不一样的是,他适用链条式英语的语法了:

    拷贝编码
    编码以下:

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

    这样1来你便可以把全部实际操作都放在1句话里,你还可以随时终断,做别的的事,随后再次。

    这段编码其实不是对canvas的提高,只是单纯性的让他适用链条式英语的语法了。但胜在编码少,能够嵌入到任何JS库中,在此我期待能获得你的1个“强烈推荐”

    编码中毫无疑问有值得改善的地区,大伙儿能够自主健全。但——吃水不忘挖井人,期待大伙儿记得我,最关键的是思路,对吧?下面便是思路:
    大伙儿能够看到,编码中最长的一部分,是那个储存方式名的数字能量数组pro,关键编码反而很短。为何我要建这么1个数字能量数组呢?

    原本我也想立即从CanvasRenderingContext2D承继全部原生态方式,但每一个访问器下面遍历这个CanvasRenderingContext2D,結果都不1致。假如我把她们立即承继,那末当你想用chrome中的方式套在firefox里实行,就会出错。

    因此我只是把CanvasRenderingContext2D中的通用性的,无质疑的方式与特性名提取了出来,没法,仅有建1个固定不动的数字能量数组——大伙儿能够自主决策往里边加上你的方式。

    方式与特性提取下来了,接着便是把原生态的方式加在我的新目标上。我建了1个叫fn的空涵数,置放我的方式。

    因为数字能量数组中的这些元素既有涵数,也是有特性,因此我在循环系统中分辨了他是不是是1个涵数,假如是涵数,就带主要参数实行;并不是涵数——那末就毫无疑问是特性了,就把主要参数赋给这个特性。

    这样大伙儿在碰到设定canvas特性的情况下,就无需终断链了,立即把特性值当主要参数传进去就可以了,例如:

    拷贝编码
    编码以下:

    ctx.strokeStyle('#f00')

    最终,重要的重要,便是回到fn,这招是从jQuery学来的,是适用链条式英语的语法的重要。

    这段选用到了密名涵数,闭包,原形,和我之前文章内容讲过的怪异的for循环系统。

    说起来仿佛挺简易的,但是我确实是想了很久,期待对大伙儿有效。

    在写编码的全过程中,我发现chrome的做法很非常好,他有1串以set开始的涵数,如setStrokeColor,setLineCap等涵数,给她们传主要参数,便可以取代对应的strokeStyle和lineCap等特性,也便是说,他的canvas里边就都是涵数而沒有特性了那样的话我就无需分辨是涵数還是是特性了。但firefox里边沒有这些,因此我還是只能用前面的思路。

    我也把那1串set涵数给放出来吧

    拷贝编码
    编码以下:

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

    她们的用途1看就懂。你还可以挑选1些添加前面编码的pro数字能量数组中。

    最终,我很怪异我的编码如何会沒有高亮度了。。。假如你都看到最终了,那末還是给个强烈推荐吧,让我也虚荣1把
    上一篇:html5跳跃球示例编码 返回下一篇:没有了