在固定的canvas画布内缩放的实现：
1、思路：限定canvas的范围，获取到2d句柄后，可以调用scale方法进行缩放。
2、完整代码：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas")
var ctx=c.getContext("2d")
ctx.strokeRect(5,5,25,15)
ctx.scale(2,2)
ctx.strokeRect(5,5,25,15)
ctx.scale(2,2)
ctx.strokeRect(5,5,25,15)
ctx.scale(2,2)
ctx.strokeRect(5,5,25,15)
</script>
</body>
</html>
3、实现效果
在Html页面上加入canvas元素（不能使用js动态加入canvas）。通过Html设置画布大小。可以直接在Html页面上设置Canvas元素的大小：
<canvas id="testCanvas" width="200" height="100"></canvas>
也可以通过js设置画布大小：
var canvas = document.getElementById("testCanvas")
canvas.width = 200
canvas.height = 100
这两种方法都可以。
需要注意的是，设置画布大小后，画布所有的样式和内容会重置（如画布上的图形会消失，在设置画布大小后需要重新绘制）。
示例
首先我们创建一个宽度为200px，高度为100px的画布，它的边框为红色。然后在中间画一个大小为20*20的正方形：
代码
复制代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="testCanvas"></canvas>
<script>
var canvas, context
canvas = document.getElementById("testCanvas")
canvas.width = 200
canvas.height = 100
canvas.style.border = "1px solid red"
context = canvas.getContext("2d")
context.strokeStyle = "#99cc33"
context.fillRect(90, 40, 20, 20)
</script>
</body>
</html>
复制代码
将画布大小缩小1倍
使用css设置画布大小
相关代码
canvas.style.width = "100px"
canvas.style.height = "50px"
效果
分析
我们发现画布是整体按比例缩小了1倍。
使用js设置画布大小
相关代码
复制代码
canvas.width = 100
canvas.height = 50
//设置画布大小后，所有样式会重置。因此需要重新绘制正方形
context.fillRect(90, 40, 20, 20)
复制代码
效果
分析
相当于把画布的右半部和下半部去掉了，达到了我们预期的效果。
在窗口变化时，如果不做自适应，立方体的边界会出现锯齿，这就是位图被css拉伸后失真导致的，默认canvas 画布的尺寸只有300*150。因此，我们需要用canvas 画布的像素尺寸自适应窗口。
canvas 的行内属性width、height与css的width、height属性差别
我们可以使用css设置设置canvas元素的像素的宽度和高度，但是我们在使用坐标系进行绘图时，使用的坐标系是通过canvs行内属性设置的width和height，默认为300x150；也就是如果没有设置行内的width 和 height属性，使用canvasAPI进行绘图时整个canvs的坐标系在可见范围内是300x150，并不是css设置的像素尺寸。
Three加载模型常用的方法-判断窗口是否变化，更新canvas尺寸，解决模型锯齿的问题。
当canvas 画布的尺寸变化了，相机视口的宽高比也需要同步调整。
当相机视口的宽高比变了，相机的透视投影矩阵也会随之改变，因此我们需要使用camera.updateProjectionMatrix() 方法更新透视投影矩阵。
这样我们拖拽浏览器的边界，缩放浏览器的时候，就可以看到canvas 画布自适应浏览器的尺寸了。
渲染尺寸改变时 重置相机视口的宽高比，更新透视头一个矩阵。解决模型变形的问题。
