canvas初体验：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<!-- canvas中文文档：https://www.canvasapi.cn/ -->
<!-- 一般给个id：为了找到当前的canvas 例如：canvas1-->
<!-- 1.给canvas画布指定大小：宽度：1000 高度：600 注意没有单位 -->
<!-- 画布样式：边框、背景色、位置等 -->
<!-- 注意：当用户的浏览器支持canvas的时候,canvas标签内部的文字时不会显示的 -->
<canvas id="canvas1" width="1000" height="600"
style="border:1px solid #aaa;display:block;#ff2;margin:50px auto">当前浏览器不支持canva，请更换浏览器后再试
</canvas>
<script>
// 1.在windo.onload函数中调用获取id元素的方法，获取canvas画布对象
window.onload = function () {
var canvas1 = document.getElementById('canvas1');
// 2.得到canvas绘图的一个方法：目前使用的是2d
var context = canvas.getContext('2d');
// 1.给canvas画布指定大小的第二种方式 注意写到行内的width和height 会覆盖canvas1.width和canvas1.height 的值
canvas1.width = 200;
canvas1.height = 300;
// canvas的兼容性：大部分主流浏览器都支持canvas
// 当用户浏览器不支持canvas时，你可以在canvas标签 里面说明：当前浏览器不支持canva，请更换浏览器后再试
// 语句判断当前浏览器是否支持canvas
if (
canvas1.getContext("2d")
) {
var context = canvas1.getContext("2d")
} else {
alert("当前浏览器不支持canvas，请更换浏览器再试")
}
}
</script>
</body>
</html>