canvas如何自适应窗口大小

问题

canvas的宽高不能用百分比来显示 如果想用canvas做一个图希望能够自适应窗口宽度怎么办。

正文

这里我们先画了一个宽为canvas宽度的红色矩形 这样canvas如何变化自己的宽度 矩形都可以跟着改变。

 !doctype html 

 html lang en 

 head 

 meta charset UTF-8 / 

 meta name viewport content width device-width, initial-scale 1.0 

 meta http-equiv X-UA-Compatible content IE edge,chrome 1 / 

 title 页面名称 /title 

 style type text/css 

 /style 

 /head 

 body 

 div style width: 100% id content 

 canvas id box width 300 height 300 /canvas 

 /div 

 /body 

 script 

 /** type {HTMLCanvasElement} */

 const canvas document.getElementById( box )

 const ctx canvas.getContext( 2d )

 const draw () {

 const { width } canvas

 ctx.fillStyle red 

 //用canvas的宽长绘图

 ctx.fillRect(0, 0, width, 50)

 draw()

 /script 

我们希望这个红色的矩形作为网页顶部的导航。

那么它必须宽达到网页的百分百 那么我们可以把父级div的百分百宽度赋予给他。

 !doctype html 

 html lang en 

 head 

 meta charset UTF-8 / 

 meta name viewport content width device-width, initial-scale 1.0 

 meta http-equiv X-UA-Compatible content IE edge,chrome 1 / 

 title 页面名称 /title 

 style type text/css 

 /style 

 /head 

 body 

 div style width: 100% id content 

 canvas id box width 300 height 300 /canvas 

 /div 

 /body 

 script 

 /** type {HTMLCanvasElement} */

 const canvas document.getElementById( box )

 const ctx canvas.getContext( 2d )

 const draw () {

 //获取父级宽度并赋值给canvas

 const contentWidth document.getElementById( content ).clientWidth

 canvas.width contentWidth

 const { width } canvas

 ctx.fillStyle red 

 ctx.fillRect(0, 0, width, 50)

 draw()

 /script 

 /html 

看似达到了效果 但是当我们缩小页面时 发现了问题。

因为我们赋予canvas宽度时传入的是定值 而网页缩小时 canvas的宽度还是没有改变。

于是我们可以想到监听网页的缩放事件。

每次缩放都重新将重新改变canvas的宽度重新绘制。

 !doctype html 

 html lang en 

 head 

 meta charset UTF-8 / 

 meta name viewport content width device-width, initial-scale 1.0 

 meta http-equiv X-UA-Compatible content IE edge,chrome 1 / 

 title 页面名称 /title 

 style type text/css 

 /style 

 /head 

 body 

 div style width: 100% id content 

 canvas id box width 300 height 300 /canvas 

 /div 

 /body 

 script 

 /** type {HTMLCanvasElement} */

 const canvas document.getElementById( box )

 const ctx canvas.getContext( 2d )

 const draw () {

 const contentWidth document.getElementById( content ).clientWidth

 canvas.width contentWidth

 const { width } canvas

 ctx.fillStyle red 

 ctx.fillRect(0, 0, width, 50)

 draw()

 //窗口缩放事件

 window.onresize function () {

 draw()

 /script 

 /html 

layer弹出iframe的高度不自适应。一直是150px 通常，我们这样写没问题，但是，当我们需要页面加载后直接就弹出layer时，最常见应用场景就是注册页面加载后直接触发layer，弹出注册协议。 这时候问题来了，我们会发现 弹出的iframe的高度一直是150px,高度并不自适应。 经分析：原因就是layer计算ifram的时候，页面还没加载完全，而ifram本身就是通过页面的高度的进行计算的（因为我高度设置的80%）
WPF 窗口大小自适应 原文:WPF 窗口大小自适应 在设置桌面不同分辨率以及较大DPI下，窗口如何显示的问题。 方案一 设置窗口最大值和最小值显示 通过对比当前屏幕的可显示区域，将窗口高宽最大值和最小值，设置为窗口的实际高宽（此例中仅设置高度） 设置窗口内容自适应SizeToContent= WidthAndHeight 添加ViewBox -- 设置默认不拉伸Stretch= None ，当DPI超大时如超过1920*1080p的175%（即win10默认不支持的比例显示），开启ViewBox缩放 顶层布局容器RootGrid添加高宽最大值和最小值。