HTML5+CSS3学习笔记（第12章）绘制图形_css3+html5第十二章练习-CSDN博客

本文链接：https://blog.csdn.net/fangpihuiyu/article/details/104226041

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>