如何使用canvas将我的html划分为部分并调整其大小适合浏览器窗口

Question

我是网页开发的新手，现在很少关于html。

Div标签将用于将网页划分为不同的部分，但我如何做到这一点 使用canvas或甚至使用div标签。如需参考，请参阅随附的图像分页。

我想如上所示划分。

此外，这些分区也应根据浏览器窗口调整大小。 我尝试了2-3个选项，但效果不佳。

我需要用javascript写吗？

由于

Answer 1

<强>概述

您所询问的内容通常被称为＆＃34;响应＆＃34;设计。

这是一个很大的话题！这里是响应式设计介绍的链接：

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

您询问有关扩展的信息，但响应式设计还涉及根据设备大小移动内容。

例如，如果您在手机上查看上面的设计，您可能希望红色和绿色部分堆叠在蓝色部分下方。您可以使用CSS根据调整事件大小来移动内容。

现在回答你。

Canvas通常用于显示图表和其他视觉信息。

例如，您的红色矩形可能包含使用画布的图形

你的画布（你的图表）可以这样缩放：

// the original size of your red rect
// this is the red width at "full size"

var originalWidth=450;
var originalHeight=125;

// new max values for your red rect
// this example assumes the user resizes their browser to less width

var maxWidth=300;
var maxHeight=125;

// now resize the canvas while maintaining aspect ratio
// so your graph does not distort

var scaleFactor=Math.min((maxWidth/originalWidth),(maxHeight/originalHeight));

// resize the canvas element proportionally

canvas.width=originalWidth*scaleFactor;
canvas.height=originalHeight*scaleFactor;

// A gotcha!  When you resize the canvas all its content is erased.
// Therefore, you must redraw your graph to the canvas

// scale the canvas

context.scale(scaleFactor,scaleFactor);

// now redraw your graph as you originally did
// context.scale will take care of all the scaling for you!