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>