canvas实现画板功能

canvas实现画板功能

需求分析
1.具有基本的铅笔功能
2.即时直线绘制
3.即时绘制矩形
4.即时圆形
5.即时橡皮擦
7.插入图片
8.把画板保存为图片并下载 //此处还没做好，画板底色是黑色的
9.选择颜色
10.选择线条粗细

Setp1:构建网页基本样式

html代码

    <!--可选操作-->
    <div id="select">
        <button id="pen">铅笔</button>
        <button id="line">直线</button>
        <button id="rect">矩形</button>
        <button id="arc">圆形</button>
        <button id="robber">橡皮檫</button>
        <button id="img">图片</button>
        <button id="save">保存</button>
        <input type="file" id="file" name="img" style="display: none"/>
        <input type="color" id="color"/>
        <input type="number" id="lineWidth"/>
    </div>

    <!--画板-->
    <canvas id="penal" width="800" height="800"></canvas>

css代码

    /*只有一句，用来初始化画板颜色*/
    #penal {
        width: 800px;
        height: 800px;
        background-color: