webgl shader

webgl shader
先处理顶点 再处理颜色

比方说画三角形
vs那就先弄好3个三角形顶点的坐标
fs然后设置颜色

比方说纹理贴图(方形图片)
vs 先弄好4个顶点
fs然后纹理贴图

ps:需要注意的是varying 这个东西只用于画渐变和纹理贴图需要用

javascript tofixed四舍五入的方法

javascript tofixed四舍五入的方法

Number.prototype.toFixed = function(d) {
    var s = this + "";
    if (!d) d = 0;
    if (s.indexOf(".") == -1) s += ".";
    s += new Array(d + 1).join("0");
    if (new RegExp("^(-|\\+)?(\\d+(\\.\\d{0," + (d + 1) + "})?)\\d*$").test(s)) {
        var s = "0" + RegExp.$2,
            pm = RegExp.$1,
            a = RegExp.$3.length,
            b = true;
        if (a == d + 2) {
            a = s.match(/\d/g);
            if (parseInt(a[a.length - 1]) > 4) {
                for (var i = a.length - 2; i >= 0; i--) {
                    a[i] = parseInt(a[i]) + 1;
                    if (a[i] == 10) {
                        a[i] = 0;
                        b = i != 1;
                    } else break;
                }
            }
            s = a.join("").replace(new RegExp("(\\d+)(\\d{" + d + "})\\d$"), "$1.$2");
        }
        if (b) s = s.substr(1);
        return (pm + s).replace(/\.$/, "");
    }
    return this + "";
};

jquery tweenmax时间轴动画

jquery tweenmax时间轴动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>{$title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <!-- Link Swiper's CSS -->
    <include file="commonheader" />
</head>

<body>
    <include file="jiazai" />
    <include file="commonmokuai" />
    <div class="showcontainer" style="display: block;">
      <div class="ddd1" style="position: absolute;left:10%;top:20%;">111111111</div>
    </div>
    <script src="{$yuming}/js/TweenMax.js"></script>
    <script src="{$yuming}/js/DrawSVGPlugin.min.js"></script>
    <include file="commonfooter" />
    <script type="text/javascript">
      var times=0;
    $(function() {
      var tl = new TimelineLite();

       var tm = new TimelineMax();
       // tm.to($('.ddd1'), 3, {left:300,delay:0,repeat: 1, yoyo: true,repeatDelay: 1,ease: Linear.easeNone});//将一个动画添加到时间轴
       // tl.add(tm);//将一个动画添加到时间轴
       // 
      tm.to($('.ddd1'), 3, {left:300,delay:0,repeatDelay: 1,ease: Linear.easeNone});//将一个动画添加到时间轴
       tl.add(tm);//将一个动画添加到时间轴
       // 
       tl.pause();

       setInterval(function(){
             times+=0.1;
             tl.progress(times);
       },200)
   

    })
    </script>
</body>

</html>

layaair matterjs教程

layaair matterjs教程

$(function() {
    var Browser = Laya.Browser;
    var WebGL = Laya.WebGL;
    var Matter = window.Matter;
    var LayaRender = window.LayaRender;
    var stageWidth = 750;
    var stageHeight = 1206;
  
    Laya.init(stageWidth, stageHeight, WebGL);
     Laya.stage.scaleMode = "fixedwidth";
    // module aliases
    var Engine = Matter.Engine,
        Render = Matter.Render,
        World = Matter.World,
        Bodies = Matter.Bodies;
    // create an engine
    var engine = Engine.create({
        enableSleeping: true
    });
    // engine.world.gravity.y = 0;//关闭重力
    // create a renderer
    // var render = Render.create({
    //     element: document.body,
    //     engine: engine
    // });
    
    var render = LayaRender.create({
        engine: engine,
        width: 750,
        height: 1206,
        options: {
            // background: '../../res/physics/img/background.png',
            wireframes: false //true//           
        }
    });
    // create two boxes and a ground
    var boxA = Bodies.rectangle(100, 200, 750, 10);
    var boxB = Bodies.rectangle(450, 50, 47, 47,{render:{
            sprite: {
                texture: '/fudiqixi/images/2/xiaoqiu.png'
            }
        } });
    var ground = Bodies.rectangle(750/2, 1206/2, 750, 60, {
        isStatic: true
    });
    // add all of the bodies to the world
    World.add(engine.world, [boxA, boxB, ground]);
    // run the engine
    Engine.run(engine);
    // run the renderer
    // Render.run(render);
    LayaRender.run(render);
})

ps:需要引入LayaRender.js 和matterjs.js layaair默认是不引入的

matterjs 默认中心点在中间 layaair在左上 2个结合的时候 务必保持一致

PHP imagick判断图片是否有透明通道

PHP imagick判断图片是否有透明通道

  $xiangmupath = $this->getxiangmupath();
        $cehipsd     = $xiangmupath . '/images/1/p1_wz1.png';

        $im         = new \Imagick($cehipsd);
         $ss=$im->getImageAlphaChannel();
        print_r($ss);
        exit();

如果输出是1代表有透明通道 0就是没有

ps:判断的后缀名是png 肯定是得出透明通道 不管他有没有透明
所以一般用在imagick创建的时候 判断

layaair截图的方法

layaair截图的方法


  function jietu() {
     var xiaoches = getsp("/lanchengwuyi/images/9/chezi.png", 750 / 2 - 60, 1206 - 220);
        xiaoches.pivotX = 0;
        xiaoches.pivotY = 0;
        //定义一个HTMLCanvas来接收截屏返回的HTMLCanvas对象;截取原始图片中从0,0坐标开始的100*100部分图片
        var htmlC = xiaoches.drawToCanvas(100, 200, 0, 0);
        //获取原生的canvas对象
        var canvas = htmlC.getCanvas();
        console.log(canvas);
        //打印图片base64信息,可以发给服务器或者保存为图片
        console.log(canvas.toDataURL("image/png"));
    }

截图按照原来的图片尺寸来的 并不是当前按照屏幕大小来的
原理就是 精灵转化成canvas 然后canvas输出base64