一、最终效果
为了不浪费大家时间，先展示最终效果，看看是不是大家需要的解决方案：
标准分辨率：
其他分辨率的适配情况：
二、需求
1.canvas的内容能全部展示在屏幕上
2.尽量能保证图像不变形
3.绘制的文字也能自适应
三、解决方案
1.我们需要指定一个标准分辨率gameW和gameH
2.我们需要获取屏幕的实际分辨率：
screenW=document.documentElement.clientWidth
screenH=document.documentElement.clientHeight
3.把canvas的宽高设置为屏幕一样大
4.计算屏幕宽度与标准宽度的比值：
kW=screenW/gameW
5.适配之后的绘图区高度可能小于屏幕高度，所以会出现黑边。那么我们需要计算黑边的高度：
dY = (screenH - gameH * kW) / 2; //黑色区域的高度(紫色区域顶部与屏幕顶部的距离)
注意，当dY小于0时，绘图区会超出屏幕范围，这时就需要压缩绘图区高度(这时，画面会有所变形，也是不可避免的事)：
//我们先根据宽度比例适配
let dY = (screenH - gameH * kW) / 2; //黑色区域的高度(紫色区域顶部与屏幕顶部的距离)
//当dY小于0时，我们不得不把画面给纵向压缩了。不然部分内容就会到屏幕外面去了
if (dY<0){
dY=0;
kH=screenH/gameH;
}
let scaleH = kW; //高度缩放率，默认以宽度比例
if (kH!==1){
scaleH=kH;
}
最后，还有一个重要的问题，字体大小的自适应。我想到的最简单的方法就是使用双缓冲机制，我们绘图、绘制文字都在另一个缓冲canvas上进行，最后根据scaleH进行缩放，把缓冲canvas的内容绘制到屏幕canvas上。
四、完整代码
核心代码：
let canvas = document.getElementById("main");
let ctx = canvas.getContext("2d");
let screenW = document.documentElement.clientWidth; //屏幕宽度
let screenH = document.documentElement.clientHeight; //屏幕高度
let gameW = 640, gameH = 1280; //标准分辨率,也就是你开发时的分辨率 TODO:这里可以自行修改
let kW = screenW / gameW; //屏幕宽度与标准宽度的比值
let kH = 1; //屏幕高度与标准高度的比值
//我们先根据宽度比例适配
let dY = (screenH - gameH * kW) / 2; //黑色区域的高度(紫色区域顶部与屏幕顶部的距离)
//当dY小于0时，我们不得不把画面给纵向压缩了。不然部分内容就会到屏幕外面去了
if (dY < 0) {
dY = 0;
kH = screenH / gameH;
}
let scaleH = kW; //高度缩放率，默认以宽度比例
if (kH !== 1) {
scaleH = kH;
}
//设置canvas的绝对大小与屏幕一致
canvas.width = screenW;
canvas.height = screenH;
//缓冲区
let canvasBuffer = document.createElement("canvas");
let ctxBuffer = canvasBuffer.getContext("2d");
//缓冲区使用标准分辨率
canvasBuffer.width = gameW;
canvasBuffer.height = gameH;
let timer = setInterval(mainLoop, 32); //60FPS
let testImg = NewImage('./test.png', 200, 250); //测试图片
//游戏主循环
function mainLoop() {
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);
}
狡猾的皮球
发布了40 篇原创文章 · 获赞 99 · 访问量 12万+
私信
关注
标签：canvas,drawText,let,HTML5,dY,ctxBuffer,屏幕
来源： /qq_39687901/article/details/104071957
如果觉得《html 自动适应手机屏幕大小 HTML5 canvas自适应手机屏幕大小的一种解决方案》对你有帮助，请点赞、收藏，并留下你的观点哦！
