canvas画笔升级版

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>画板</title>
        <style>
            *{padding: 0;margin: 0;}
            html {
                overflow: hidden;
            }
            a{
                text-decoration: none;
                width: 25px;
                height: 25px;
            }
            #box{
                background-color: #242424;
            }
            .toolMenu{
                position: absolute;
                color: white;
            }
            .openButton,.download{
                width: 25px;
                height: 25px;
                background-color: greenyellow;
                border-radius: 50%;
                margin: 5px;
                color: red;
                text-align: center;
                line-height: 25px;
                cursor: pointer;
            }
            .tool,.eraser{
                padding: 5px;
                margin: 5px;
                border:2px solid greenyellow;
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="toolMenu">
            <div class="openButton">刷</div>
            <ul class="tool">
                <li>宽度:<input class="widthInput" type="range"/></li>
                <li>颜色:<input type="color"/></li>
                <li><button>橡皮擦</button></li>
            </ul>
            <ul class="tool eraser">
                <li>宽度:<input class="eraserInput" type="range"/></li>
            </ul>
            <div class="openButton clearButton">清</div>
            <a href="" class="download"><div class="download">存</div></a>
        </div>
        <canvas id="box"></canvas>
        <script src="js/painer.js"></script>
        <script src="js/main.js"></script>
    </body>


    <script>
        (function () {
    function Painter(id) {
        var canvasEle = document.getElementById(id);
        canvasEle.width = innerWidth;
        canvasEle.height = innerHeight;

        this.context = canvasEle.getContext("2d");
        //画笔渐变色
        var linearGradient = this.context.createLinearGradient(0,0,innerWidth,innerHeight);
        linearGradient.addColorStop(0,"#1EEB9F");
        linearGradient.addColorStop(0.5,"#FFFFFF");
        linearGradient.addColorStop(1,"#26B9EB");
        this.context.strokeStyle = linearGradient;

        this.drawLine();
    }
    Painter.prototype.drawLine = function () {
        var self = this;
        //监听鼠标按下抬起
        this.context.canvas.addEventListener("mousedown",startAction);
        this.context.canvas.addEventListener("mouseup",endAction);
        //封装鼠标按下函数
        function startAction(event) {
            //如果没有使用橡皮擦就画线
            if(!self.isClear){
                //开始新的路径
                self.context.beginPath();
                self.context.moveTo(event.pageX,event.pageY);
                self.context.stroke();
            }
            //监听鼠标移动
            self.context.canvas.addEventListener("mousemove",moveAction);
        }
        //封装鼠标抬起函数
        function endAction() {
            //不再使用橡皮擦
            self.isClear=false;
            //移除鼠标移动事件
            self.context.canvas.removeEventListener("mousemove",moveAction);
        }
        //封装鼠标移动函数
        function moveAction(event) {
            //判断是否启动橡皮擦功能
            if(self.isClear){
                self.context.clearRect(event.pageX-8,event.pageY-8,16,16);
                return;
            }
            self.context.lineTo(event.pageX,event.pageY);
            self.context.stroke();
        }
    };
    //封装画笔宽度
    Painter.prototype.setLineWidth = function (width) {
       this.context.lineWidth = width;
    };
    //封装设置画笔样式
    Painter.prototype.isRoundLineCap = function (isRound) {
        this.context.lineCap = isRound?"round":"butt";
    };
    //封装画笔颜色
    Painter.prototype.setLineColor = function (color) {
        this.context.strokeStyle = color;
    };
    //封装画布内容转换
    Painter.prototype.save=function(){
        return this.context.canvas.toDataURL();
    };
    //封装橡皮擦
    Painter.prototype.eraser=function(){
        this.isClear=true;
    }
    //封装清屏
    Painter.prototype.clearCls=function(){
         this.context.clearRect(0,0,innerWidth,innerHeight)
    };
    //Painter定义到window上
    window.Painter = Painter;
})();
     



    (function () {
    function init() {
        var panter = new Painter("box");
        panter.setLineWidth(5);
        panter.isRoundLineCap(true);
        //panter.setLineColor("#242424");
        var toolView = document.querySelector(".tool");
        document.querySelector(".openButton").onclick = function () {
            toolView.style.display = toolView.style.display === "block"?"none":"block";
        };
        document.querySelector("input[type=range]").value = panter.context.lineWidth*2;
        //input的range绑定到画笔宽度
        document.querySelector("input[type=range]").onchange = function () {
            panter.setLineWidth(this.value/2);
        };
        //获取color颜色绑定到画笔
        document.querySelector("input[type=color]").onchange = function () {
            panter.setLineColor(this.value);
        };
        //清屏
        document.querySelector('.clearButton').onclick = function() {
            panter.clearCls();
        }
        //橡皮擦
        document.querySelector('.tool button').onclick=function(){
            panter.eraser();
        }
        //下载画布内容
        document.querySelector(".download").onclick=function(){   
            var a=panter.save();
            console.log(1);
            this.href=a;
        }
    }
    init();
})();
    
    
    </script>
</html>
猜你喜欢
