封装成js和css文件：

painter.js

/*

* @Author: ion

* @Date:   2018-10-12 00:43:22

* @Last Modified by:   ion

* @Last Modified time: 2018-10-12 01:48:58

*/

var record =[];

var $elBox;

        $(function(){

            //下载图片

            var downloadImage = document.getElementById('downloadImage');

            bindButtonEvent(downloadImage, "click", saveAsLocalImage);

            //设置画笔颜色

            $("#penColor").colpick({

                layout:'rgbhex',

                color:'ff8800',

                onSubmit:function(hsb,hex,rgb,el) {

                    $(el).css('background-color', '#'+hex);

                    $(el).colpickHide();

                    $(el).attr('color-mark','#'+hex);

                }

            }).css('background-color', '#ff8800');

        });

       //初始化界面，为控件区域添加必要的html元素

        function initUI($el){

            var view = `

                <div class="painter_win">

            <div class="setWH">

                <span>请输入画布大小：</span>

                <div class="setCanvas">

                    <input type="text" id="canvas_width" value="500"> x <input type="text"  id="canvas_height" value="300">

                </div>

                <button id="submitSet" onclick="createCanvas()">确定</button>

            </div>

            <div class="tool">

                <ul>

                    <li>

                        画笔颜色

                        <input type="text" id="penColor" color-mark="#ff8800">

                    </li>

                    <li id="setWe">

                        画笔粗细

                        <input type="text" id="penWeight" value="3">

                    </li>

                    <li class="reduceW" onclick="backStep()">撤回</li>

                    <li class="reduceW" onclick="clearCanvas()">清空</li>

                    <li id="downloadImage">下载图片</li>

                </ul>

            </div>

            <div id="content"></div>

        </div>

            `;

            $el.append(view);

            $elBox=$el;

        }

        //创建canvas画布

        function createCanvas(){

            if(!$("#content #box")[0]){

                var width = $(".painter_win .setWH #canvas_width").val();

                var height = $(".painter_win .setWH #canvas_height").val();

                if(width || height){

                    var boxOffsetX =$elBox[0].offsetLeft;

                    var boxOffsetY =$elBox[0].offsetTop;

                    initCanvas(width,height,boxOffsetX,boxOffsetY);

                    $(".tool").show();

                }else{

                    alert("请输入画布大小");

                }

            }

        }

        //初始化画布，添加鼠标事件

        function initCanvas(width,height,boxOffsetX,boxOffsetY){

            let txt = `<canvas id="box" width="${width}" height="${height}"></canvas>`;

            $("#content").append(txt);

            $("#box").css({

                'position'   : 'relative',

                'left'       : '50%',

                'margin-left':  -width/2,

                'margin-top' : '20px'

            });

            var box=document.getElementById('box');

            var ctx=box.getContext('2d');

 <