canvas 实战
查看当前浏览器对 canvas 的支持情况
我们在上面也说明了，我们的一些浏览器是不支持 canvas 的，这个时候我们应该怎么去做呢？
这时候我们可以直接在 canvas 标签之间去书写内容，这么做的好处是当你的浏览器不支持 canvas 的时候，我们可以去展示标签之间的内容，具体如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
margin: 0px;
}
canvas{
background: #ccc;
}
</style>
</head>
<body>
<canvas>
我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
</canvas>
</body>
</html>
既然已经创建完成了具体的内容，那我们现在可以看见了么？
我们虽然没有给定 canvas 的宽度和高度，但是实际上我们的canvas 在页面中是可见的。
需要注意，canvas 默认样式的宽度和高度 是 300px * 150px.
即使我们不去设置具体的宽度和高度，它也是可以显示的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
margin: 0px;
}
canvas{
background: #ccc;
}
</style>
</head>
<body>
<canvas>
我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
</canvas>
</body>
</html>
那我们该如何去修改画布的默认大小呢？
修改 Canvas 的画布
按照我们正常的思路来说，我们会直接去使用 canvas_1.style.width = "500px"; 来去修改我们的 canvas 的宽度，但是这样真的对么？
答案当然是否定的，canvas 相当于是一张图片，如果我们设置 <canvas width="500" height="500">.
这样写相当于图片的实际大小是 500 * 500.
但是，假如我们这样去书写。
<canvas style="width:500px;height:500px;">
这样实际是把 canvas 默认的 300 * 150 的图片强行拉伸为 500px * 500px 了，所以这样会导致我们的内容被强行缩放，从而导致问题。
按照我们正常的思路来说，我们会直接去使用 canvas_1.style.width = "500px"; 来去修改我们的 canvas 的宽度，但是这样真的对么？
答案当然是否定的，canvas 相当于是一张图片，如果我们设置 <canvas width="500" height="500">.
这样写相当于图片的实际大小是 500 * 500.
但是，假如我们这样去书写。
<canvas style="width:500px;height:500px;">
这样实际是把 canvas 默认的 300 * 150 的图片强行拉伸为 500px * 500px 了，所以这样会导致我们的内容被强行缩放，从而导致问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
margin: 0px;
}
canvas{
background: #ccc;
}
</style>
</head>
<body>
<canvas id="canvas_1">
我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
</canvas>
</body>
<script type="text/javascript">
var canvas_1 = document.getElementById("canvas_1");
// 设置宽度和高度,但是这种写法会造成额外的问题
// 画布会拉伸
// canvas_1.style.width = "500px";
// canvas_1.style.height = "500px";
// 所以推荐写法
// 1.使用内联样式表
// 2.去使用点(.)
canvas_1.width = "500"; //注意，不要加 px
canvas_1.height = "500";
</script>
</html>
获取绘制环境
我们在上面已经设置了我们的画布的大小，但是存在一个问题。
我们还没有找到我们的画布呀！~
要是我们连具体的画布都没有，我们又该向哪里去绘画呢？
实际上我们可以通过 var ctx = canvas_1.getContext("2d"); 来去获取到我们的绘制环境
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas_1" width="500" height="400" style="box-shadow: 0 0 20px black;">
当前浏览器不支持 canvas
</canvas>
</body>
<script type="text/javascript">
// 获取 canvas 元素对应的 DOM 对象
var canvas_1 = document.getElementById("canvas_1");
// 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
var ctx = canvas_1.getContext("2d");
// 打印一下，查看是否能够显示具体环境
console.log(ctx);
</script>
</html>
假如打印成功，我们应该可以在浏览器中的 console 中查看到我们的画布具体信息
但是请注意，getContext("2d"); 中一定是2d而不是2D，否则不会生效
在这里准备了一些前端面试题：
