적응 형 솔루션 HTML5는 휴대 전화 화면 크기 캔버스

첫째, 최종 결과

최종 결과를 보여주고, 우리가 볼 필요가 모든 사람의 시간을 낭비하지 않으려면 솔루션되지 않습니다 :

전체 프로젝트 주소 : https://github.com/zxf20180725/canvas_auto-adapted

표준 해상도 :

다른 해상도는 상황 적응 :

둘째, 수요

1.canvas 콘텐츠는 모든 화면에 표시 할 수 있습니다

이미지가 변형되지 않도록하려고합니다

적응 적 텍스트를 수 그리기 (3)

셋째, 솔루션

1. 우리는 표준 해상도 지정해야 gameW 및 gameH을

2. 우리는 실제 화면 해상도를 얻을 필요가 :

screenW = document.documentElement.clientWidth

screenH = document.documentElement.clientHeight

3. 화면으로 큰과 캔버스의 너비와 높이

4. 계산 화면 폭 표준 폭 비율 :

킬로와트 = screenW / gameW

영역을 드로잉하는 높이에 맞게 화면 높이보다 작을 수있다 후 5. 그것은 검정색이 나타난다. 그래서 우리는 검은 색면의 높이를 계산해야합니다 :

DY = (screenH - gameH 킬로와트 *) / 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;
    }

마지막으로, 중요한 문제, 적응 글꼴 크기가있다. 내가 가장 쉬운 방법은, 버퍼 캔버스의 내용이 화면 캔버스에 그릴, 우리가 그리는, 텍스트가 다른 쿠션 캔버스에 마지막으로 scaleH에 따라 조정 일어난다 그릴 이중 버퍼링 메커니즘을 사용하는 것입니다 생각합니다.

넷째, 전체 코드

전체 프로젝트 주소 : https://github.com/zxf20180725/canvas_auto-adapted

핵심 코드 :

    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);
    }