在HTML上绘制画布并在屏幕大小上保留Aspect

背景

这是一个非常困难的问题,我几天来一直在努力.我试图以幻灯片格式显示课程.所以课程由不同的幻灯片组成.现在覆盖在每张幻灯片的顶部的是一个画布元素,它适合屏幕的大小.

canvas.width  = document.body.clientWidth;
canvas.height = document.body.clientHeight;

这允许教师在画布上绘制笔记并突出显示课程的部分内容.

问题

幻灯片的内容由HTML组成,加载幻灯片时看起来像这样.

当我调整页面大小时......

所以这里的问题是画布'图像'根据页面与CSS的宽高比调整大小.

#theCanvas {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

但实际的HTML保持相同的大小,但重新排列其换行点,不好.

我试过了什么

首先,我使用CSS根据窗口的宽度和高度调整所有HTML元素的大小:

h1 {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #222222;
    font-weight: 200;
    font-size: 5.9vw;
}

h2 {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #222222;
    font-weight: 200;
    font-size: 3.0vh;
}

h4 {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #444444;
    font-weight: 200;
    font-size: 2vmin;
}

p {
    font-family: 'Open Sans Condensed';
    font-size: 2vmin;
    font-weight: 200;
}

接下来我使用以下方法保存并调整画布图像的大小:

window.onresize = function(event) {

    var data = canvas.toDataURL();

    // resize the canvas
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    //alert($(container).width());

    // scale and redraw the canvas content
    var img=new Image();

    img.width = document.body.clientWidth;
    img.height = document.body.clientHeight;

    img.onload=function(){
        context.drawImage(img,0,0,img.width,img.height);
    }
    img.src=data;

};

全屏(1920px宽度)的结果

单击调整大小窗口按钮(1200px)时

那非常接近.

问题

现在,当我拖动窗口的一角来调整大小时会发生这种情况:

题

1 - 当我手动调整窗口的角落时,为什么window.onresize函数不会触发？

(奖金问题)我是否以正确的方式进行此操作,或者它是否值得在HTML元素上叠加画布以进行交互式课程？

我想我误解了你的问题.

如果您希望手绘内容与html元素匹配,那么您需要确保HTML元素永远不会更改布局并始终保持相同的相对大小.在你的例子中,情况已经不是这样了.左上方有"25m",中间有"欢迎",当你将页面拖得更高时,这2个元素的分离量与元素的其他大小不成比例,所以你已经要求了一些东西这根本不可能.

您可以将SVG用于所有文本,这样可以将其缩放到任意大小,而普通HTML文本则不能.换句话说,如果你使用SVG使页面变得非常高大,你将获得高大细长的文本,所有的位置和大小将与其原始位置和大小成比例,而HTML与文本不会拉伸,你设置大小到各种设置,vh但这只是意味着浏览器将选择大小,而不是按比例缩放文本.

示例:原始所需显示

将窗口更改为高和薄(font-size: 10vh;)

请注意,字体未拉伸,因此"25m"和"welcome"之间的相对大小和距离不再匹配

用SVG做同样的事情 preserveAspectRatio="none"

现在请注意,"25m"和"Welcome"都很高大.这意味着如果你在画布上画了两个框,那么在缩放后两个框仍然会匹配.如果没有这个东西是不匹配的.

这是上面的HTML版本

body { margin: 0; }
.center {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20vh;
}

25m

  
Welcome