HTML5canvas自适应手机屏幕大小的一种解决方案 一、最终效果为了不浪费大家时间，先展示最终效果，看看是不是大家需要的解决方案：完整项目地址：https://github.com/zxf20180725/canvas_auto-adapted
标准
excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载
分辨率：其他分辨率的适配情况：二、需求1.canvas的内容能全部展示在屏幕上2.尽量能保证图像不变形3.绘制的文字也能自适应三、解决方案1.我们需要指定一个标准分辨率gameW和gameH2.我们需要获取屏幕的实际分辨率：screenW=document.documentElement.clientWidthscreenH=document.documentElement.clientHeight3.把canvas的宽高设置为屏幕一样大4.计算屏幕宽度与标准宽度的比值：kW=screenW/gameW5.适配之后的绘图区高度可能小于屏幕高度，所以会出现黑边。那么我们需要计算黑边的高度：dY=(screenH-gameH*kW)/2; //黑色区域的高度（紫色区域顶部与屏幕顶部的距离）注意，当dY小于0时，绘图区会超出屏幕范围，这时就需要压缩绘图区高度（这时，画面会有所变形，也是不可避免的事）：//我们先根据宽度比例适配letdY=(screenH-gameH*kW)/2;//黑色区域的高度（紫色区域顶部与屏幕顶部的距离）//当dY小于0时，我们不得不把画面给纵向压缩了。不然部分内容就会到屏幕外面去了if(dY<0){dY=0;kH=screenH/gameH;}letscaleH=kW;//高度缩放率，默认以宽度比例if(kH!==1){scaleH=kH;}最后，还有一个重要的问题，字体大小的自适应。我想到的最简单的方法就是使用双缓冲机制，我们绘图、绘制文字都在另一个缓冲canvas上进行，最后根据scaleH进行缩放，把缓冲canvas的内容绘制到屏幕canvas上。四、完整代码完整项目地址：https://github.com/zxf20180725/canvas_auto-adapted核心代码：letcanvas=document.getElementById("main");letctx=canvas.getContext("2d");letscreenW=document.documentElement.clientWidth;//屏幕宽度letscreenH=document.documentElement.clientHeight;//屏幕高度letgameW=640,gameH=1280;//标准分辨率,也就是你开发时的分辨率TODO:这里可以自行修改letkW=screenW/gameW;//屏幕宽度与标准宽度的比值letkH=1;//屏幕高度与标准高度的比值//我们先根据宽度比例适配letdY=(screenH-gameH*kW)/2;//黑色区域的高度（紫色区域顶部与屏幕顶部的距离）//当dY小于0时，我们不得不把画面给纵向压缩了。不然部分内容就会到屏幕外面去了if(dY<0){dY=0;kH=screenH/gameH;}letscaleH=kW;//高度缩放率，默认以宽度比例if(kH!==1){scaleH=kH;}//设置canvas的绝对大小与屏幕一致canvas.width=screenW;canvas.height=screenH;//缓冲区letcanvasBuffer=document.createElement("canvas");letctxBuffer=canvasBuffer.getContext("2d");//缓冲区使用标准分辨率canvasBuffer.width=gameW;canvasBuffer.height=gameH;lettimer=setInterval(mainLoop,32);//60FPSlettestImg=NewImage('./test.png',200,250);//测试图片//游戏主循环functionmainLoop(){drawFillRect(ctx,'#000',0,0,canvas.width,canvas.height);//给canvas刷上一层黑色背景~drawFillRect(ctxBuffer,'#FF00FF',0,0,gameW,gameH);//给游戏区域刷上一层紫色背景~drawText(ctxBuffer,'#FFF',25,'窗口width：'+screenW,0,0);drawText(ctxBuffer,'#FFF',25,'窗口height：'+screenH,0,30);drawText(ctxBuffer,'#FFF',25,'kW：'+kW,0,60);drawText(ctxBuffer,'#FFF',25,'kH：'+kH,0,90);drawText(ctxBuffer,'#FFF',25,'dY：'+dY,0,120);drawSrcImg(ctxBuffer,testImg,100,100);drawText(ctxBuffer,'#000',32,'柳逐霓',150,350);drawSrcImg(ctxBuffer,testImg,270,100);drawText(ctxBuffer,'#000',32,'柳逐霓',320,350);drawSrcImg(ctxBuffer,testImg,530,100);drawText(ctxBuffer,'#000',32,'柳逐霓',580,350);drawSrcImg(ctxBuffer,testImg,100,400);drawText(ctxBuffer,'#000',32,'柳逐霓',150,650);drawSrcImg(ctxBuffer,testImg,100,700);drawText(ctxBuffer,'#000',32,'柳逐霓',150,950);drawSrcImg(ctxBuffer,testImg,100,1000);drawText(ctxBuffer,'#000',32,'柳逐霓',150,1250);//双缓冲ctx.drawImage(canvasBuffer,0,0,gameW,gameH,0,dY,screenW,gameH*scaleH);} -全文完-
浙公网安备 33021202002483