h5简易手写板

Posted 2020-09-28 花儿为何那样红

　

　　。。。。。。。。。。。。。

　　

我该说点什么呢，开头居然不知道想说点什么！好吧不知道说什么，我们就来说说这个手写板吧，虽然这个手写板现在没什么用，但是。。。。。，好像的确没什么用啊！

只是存粹哪里练手的的，呵 。呵 。（大写的尴尬）。我到底在说什么啊！！！好吧不说了，都快跑题了。

我们先看效果吧：

　　在我小学的美术可是拿 了98分的，你说我画的好不好，厉不厉害，害不害怕。谔谔，好吧长大以后这个画画的天分就下降了这么点点哈。。。

废话不多说，整体功能，可以改变颜色，线条有粗有细（怎么感觉哪里不对），可以清除。然后 然后没有然后了。。

css 就不多说了吧（其实就是难得弄）。。

然后是html

<canvas id="canvas"></canvas>
    <div id="controller">
        <div id="dclear"><a href="javascript:;" id="btnclear">清除</a></div>
        <div id="dcolors">
            <div class="dcolor dblack" data-color="black"></div>
            <div class="dcolor dred" data-color="red"></div>
            <div class="dcolor dgreen" data-color="green"></div>
            <div class="dcolor dblue" data-color="blue"></div>
            <div class="dcolor ffe0" data-color="#88ffe0"></div>
            <div class="dcolor ff4e" data-color="#60ff4e"></div>
            <div class="dcolor ee6e" data-color="#b1ee6e"></div>
            <div class="dcolor a8ee" data-color="#eba8ee"></div>
            <div class="dcolor c8ff" data-color="#4fc8ff"></div>
            <div class="dcolor cb66" data-color="#eecb66"></div>
            <div class="dcolor d84ee" data-color="#9c84ee"></div>
        </div>
        <div id="xians">
            <div class="dxian" data-color="1">线1</div>
            <div class="dxian" data-color="2">线2</div>
            <div class="dxian" data-color="3">线3</div>
            <div class="dxian" data-color="4">线4</div>
            <div class="dxian" data-color="6">线6</div>
            <div class="dxian" data-color="8">线8</div>
            <div class="dxian" data-color="10">线10</div>
            <div class="dxian" data-color="12">线12</div>
            <div class="dxian" data-color="16">最大</div>
        </div>
    </div>

最后核心js来了，大家注意了。

var isMouseDown = false;
var LastLoc = { x: 0, y: 0 };
var scolor= "black";

onload = function () {//页面加载完毕后执行
            canvasWidth = 500;
            canvasHight = 500;
            canvas = document.getElementById("canvas");//演员
            context = canvas.getContext("2d");//相当于是演员去表演的舞台
            drawGrid();
            canvas.onmousedown = function (e) {//鼠标按下
                e.preventDefault();//取消事件的默认动作
                isMouseDown = true;
                LastLoc = windowToCanvas(e.clientX, e.clientY);
                canva(e);
            };
            canvas.onmouseup = function (e) {//鼠标按起
                e.preventDefault();
                isMouseDown = false;
            };
            canvas.onmouseout = function (e) {//出了画布
                e.preventDefault();
                isMouseDown = false;
            };
            canvas.onmousemove = function (e) {//鼠标移动
                e.preventDefault();
                canva(e);
            };

            $("#btnclear").click(function () {
                context.clearRect(0, 0, canvasWidth, canvasHight);
                drawGrid();
            });
            $(".dcolor").click(function () {
                $(this).addClass("sel").siblings().removeClass("sel");
                scolor = $(this).attr("data-color");
            });
            $(".dxian").click(function () {
                $(this).addClass("sel").siblings().removeClass("sel");
                border = $(this).attr("data-color");
            });
        };
		function windowToCanvas(x, y)//x,y为距离屏幕的距离
        {
            var bbox = canvas.getBoundingClientRect();//canvas距离屏幕的距离
            return { x: Math.round(x - bbox.left), y: Math.round(y - bbox.top) };//获取距离canvas的距离
        }
        function canva(e){
            if (isMouseDown) {
                var curloc = windowToCanvas(e.clientX, e.clientY);//获取到移动到的那个点的坐标
                context.beginPath();
                context.moveTo(LastLoc.x, LastLoc.y);
                context.lineTo(curloc.x, curloc.y);
                context.strokeStyle = scolor;
                context.lineWidth = border;
                context.lineCap = "round";//帽子
                context.lineJoin = "round";
                context.stroke();
                LastLoc = curloc;
            }
        }
        function drawGrid() {
    
            canvas.width = canvasWidth;//画板宽
            canvas.height = canvasHight;//画板高
            context.strokeStyle = "#000";//画板颜色

            context.beginPath();//方法在一个画布中开始子路径的一个新的集合。
            context.moveTo(3, 3); //方法可把窗口的左上角移动到一个指定的坐标。
            context.lineTo(canvasWidth - 3, 3);
            context.lineTo(canvasWidth - 3, canvasHight - 3);
            context.lineTo(3, canvasWidth - 3);
            context.closePath();
            context.lineWidth = 6;//用宽度为 6 像素的线条来绘制矩形：
            context.stroke();//结束

            //context.beginPath();
            //context.moveTo(0, 0);
            //context.lineTo(canvasWidth, canvasHight);
            //context.moveTo(canvasWidth, 0);
            //context.lineTo(0, canvasHight);

            //context.moveTo(canvasWidth / 2, 0);
            //context.lineTo(canvasWidth / 2, canvasHight);
            //
            //context.moveTo(0, canvasHight / 2);
            //context.lineTo(canvasWidth, canvasHight / 2);
            //context.lineWidth = 1;
            //context.stroke();
        }

　实在不想写字了。。。。。

源码网盘地址