HTML5+CSS3学习笔记（第12章）绘制图形
12.1认识HTML的画布
canvas相当于画布
在使用canvas.getContext(‘2d’)的时候，
出现：
Uncaught TypeError: Cannot read property ‘getContext’ of null 错误
最为可能的原因是在html元素加载之前就运行了JavaScript，所以解决方法有二：
-
在$(document).ready(function(){})写canvas代码
预加载。
- 将script扔到body的最下面
————————————————
版权声明：本文为CSDN博主「kidddfu」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kiddd_fu/article/details/78474810
12.2绘制基本图形
绘制直线
绘制圆形
以下是放屁鮰鱼实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background: blue;
}
.my-con{
width: 610px;
height: 478px;
margin: 50px auto;
background-image: url("timg.png");
background-repeat: no-repeat;
}
.button{
width: 69.33px;
height: 23px;
margin: 0 auto;
}
.can{
animation-name: pii;
animation-duration: 10s;
animation-iteration-count: infinite;
float: left;
margin-left: 169px;
}
@-webkit-keyframes pii {
0%{margin-top: 390px;}
100%{margin-top: 2px;}
}
</style>
</head>
<body>
<div class="box">
<div class="my-con">
<div class="can">
<canvas id="cav" width="40" height="40"></canvas>
</div>
</div>
<div class="button" >
<button id="btn_start">开始放屁</button>
</div>
</div>>
</body>
<script language="JavaScript">
var cav=document.getElementById("cav").getContext("2d");
btn_start.onclick=function () {
cav.beginPath();
cav.arc(20,20,20,0,Math.PI*2,true);
cav.fillStyle="#beffb7";
cav.fill();
}
</script>
</html>
![2022秋招面试记录与反思[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)