canvas的适配

笔者在做canvas的小游戏的时候发现了一个问题。就是canvas的适配了。

琢磨了好久终于发现了一种方法。

首先我们先确定canvas的内容在不同的设备上不会变形。然后我们确定下来坐标比值或者是分辨率比值。从而来确定你的定义好的坐标不会在不同的设备上不同。这样就完成了 （这两个是指导思想）

如果你按照下面还是适配没有成功  我还有一招，但是下面是基础 

 

第一步：创建canvas之后设置id='cavnas'  在stype中使用rem确定下来你要使用的canvas的宽高

<canvas id="canvas" class="canvas"></canvas>

在css里面处理一下设定一下canvas的宽高问题

 #canvas{
     position: absolute;
     @include aWHU(750, 1606);//这个是我这边rem转化的之后的写法 不知道rem得可以先去百度补习一下
这边我是写死了750 之后的分辨率的比值是在这个基础上实现的  这个是一个标准值

    其实也不一定是width:750  height:1606  这个原因是我们公司的图片是两倍尺寸。为了清晰
    如果你不需要这边你也可以是 wedth:375  height:看你自己的需求 

这边的高度我一会是背景高度。比如下面我截取的图片上 那个canvas的游戏背景的高度
太高的话会导致 canvas边的可以上下活动   啊哈哈  这个问题我们下面处理 在最后哦
 }

第二步：在js脚本中找到canvas之后给canvas设置宽高为下面

          //接收到canvas
        this.canvas = document.getElementById(gameInfo.canvasId);
        this.content = this.canvas.getContext('2d');
        this.canvas.width = this.canvas.getBoundingClientRect().width*2;
        this.canvas.height = this.canvas.getBoundingClientRect().height*2;

        你会发现我在这边canvs的宽与高都乘以了2  因为公司的都是二倍图片 所以我跟之前的css里面的理由一样

这样的话 我们就完成了canvas的适配第一步。这样设置出来的canvas中描绘的图形不会在不同的设备上变形。

第三步。我们在是被完毕了cnavas的宽与高之后，我们还需要只用一样东西，那就是坐标比值

       为什么我们需要坐标比值呢。因为这样在不同的设备上你的坐标才能显示在一个同样的位置。不会出现在不同的设备上坐标不一样的问题。否则你会发现 。自己使用的设备分辨率与其他设备分辨率不同的时候，还是没法办法适配成功

      怎么计算坐标比值

     我们可以iphone6为基础进行计算    取到设备的宽高 然后跟375进行比较 （为什么是375 因为iphone6的设备宽就是375呀）

   

    let v = this.canvas.availWidth/375//然后我们就拿到的坐标的比值
   这边可跟*2就不没有了关系

上图 这个6/7/8plus  计算出来的坐标比值  请忽略这个扁扁的图 因为实际并不是这个样子 而是这张图被扁扁了

 然后就是最关键的一步  我们需要在cnavas上面画image与font 

let v = this.canvas.availWidth/375//然后我们就拿到的坐标的比值
//这个是drawImage方法 xy分别乘以坐标的比值
context.drawImage(img,x*v,y*v);
context.drawImage(img,x*v,y*v,width,height);
context.drawImage(img,sx,sy,swidth,sheight,x*v,y*v,width,height);

//字体的绘制
context.fillText (text, x*v,y*v,[maxwidth]);
context.strokeText (text, x*v,y*v,[maxwidth]);

然后你就可以开始写相关的程序了。之所以将最终绘制的时候坐标乘以坐标比值。这样方便。我们在设置坐标的时候直接设置就好了，就不需要在处理坐标比值的问题了

可能你看到  最后还是没有看明白为什么要canvas取到宽高值后之后*2   为什么刚开始设置设置cnavas的宽高是750 1606

就是因为使用了二倍的图片尺寸为了清晰 所以会这样。canvas里面会出现渲染出来的图片会模糊，使用这个方法会避免模糊的情况

下面我继续为你解答

 

 

你成功了吗 ？？？？

如果你成功了那么恭喜你。如果没有 没关系我还有一招

因为我自己也遇到了。但是公司的公式却没有遇到。

那就是在你开始绘制之前再一次加载下面这句话   这句话不可以一直加载  因为会闪屏幕的！  

   this.canvas.width = this.canvas.getBoundingClientRect().width*2;
   this.canvas.height = this.canvas.getBoundingClientRect().height*2;

我对于上面的使用方法，是显示加载加好大量我需要使用的图片，全部设置完毕了 。需要进行渲染描绘了。再调取一次上满这个数值。

我目前遇到了的是这个。就完成了

 

好了完成

 

下面的内容也算是适配的一部分吧 。我也说不清楚

 按照我之前的写法 canvas的高1606 这也太高了 会导致一个问题 那就是这个canvas竟然是可以滑动的

作为程序员的我们当然不能放着自己的儿子不管。所以我们有什么办法不去让他可以滑动吗

其实你看到的了这里 基本也你就知道是怎么处理了。

我找到的办法是阻止HTML下的滑动 不会滑动了 cnavas的这个问题就处理了

所以大家可以在这个基础上 思考怎么样HTML不进行上下滑动

我给出的方案一

通过阻止向设备发送 触摸移动冒泡事件。这样就不会滑动了  这个其实jq的一种使用方法

   $('#canvas').on('touchmove',  (event) => {
            event.preventDefault();//阻止滑动的冒泡事件发动给HTML
   });

方案二 

跟上面的思路差不错 也是捕捉到玩家的设备滑动 然后 但凡是玩家点有滑动就确定代码将canvsa置为最上面  其实这种方法我并没使用 也不知道效果如何

$('#canvas').on('touchmove',  (event) => {
        //滑动的时候保证时刻在最上面
       document.body.scrollTop = document.documentElement.scrollTop = 0;
});

https://www.jb51.net/article/91824.htm 这个是滑动到最上面的方法

 

其实这个不算是适配的内容吧。目前我遇到的问题就只有这些了