简易白板效果-html代码-BFW代码库

代码语言：html

所属分类：其他

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>画板</title>

    <meta name="viewport" content="initial-scale=1,width=device-width,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <script type="text/javascript">
        function IsPC() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        }
        function iftel() {
            if (IsPC()) {} else {
                var a = document.createElement('a');
                a.href = "tels.html";
                a.click();
            }
        }
        iftel();
    </script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <script type="text/javascript">

        var panel = null; //色彩及更多工具调整面板整体
        var myevent = null;
        var tiaos = null;
        var rgbs = null;
        var colortest = null;
        var colorrgba = new Array(0, 0, 0, 1); //颜色值
        var colorc16 = null;
        var sizebut = null; //size 块
        var basize = 10; //笔触大小
        //canvas 组件
        var canvas_t = null; //预览层
        var canvas_v = null; //实际绘画层

        var t_v = null;
        var v_v = null; //上下文对象

        var types = 1; // 绘画类型
        var xiangp = false;
        //colortest 颜色值刷新
        function colorrgb() {
            colortest.style.backgroundColor = "rgba("+colorrgba[0]+","+colorrgba[1]+","+colorrgba[2]+","+colorrgba[3]+")";
        }
        window.onload = function () {
            panel = document.getElementById("box");
            tiaos = document.getElementsByClassName("tiao");
            rgbs = document.getElementsByClassName("rgbbut");
            colortest = document.getElementById("colortest");
            colorc16 = document.getElementsByClassName("colorc16");
            sizebut = document.getElementById("sizebuts");
            canvas_t = document.getElementById("cantest");
            canvas_v = document.getElementById("canvalue");
            canvas_t.width = $(window).width();
            canvas_t.height = $(window).height();
            canvas_v.width = $(window).width();
            canvas_v.height = $(window).height();
            t_v = canvas_t.getContext("2d");
            v_v = canvas_v.getContext("2d");
            t_v.lineJoin = "round";
            v_v.lineJoin = "round";
            v_v.lineCap = "round";
        }
        window.onmouseup = function() {
            v_v.stroke();

            v_v.beginPath();

            v_v.closePath();
            v_v.fill();
            canvas_t.onmousemove = function() {
                t_test();
            }
            window.onmousemove = function() {}
        }
        function xiu() {
            var ls = sizebut.style.marginLeft.substring(0, sizebut.style.marginLeft.length-2);
            var s = document.getElementById("bei").value;
            basize = (ls*1+5)*s;
        }
        //处理笔触大小调整
        function sizeto() {
            var sx = document.getElementById("rgbjie").offsetLeft;
            var tx = sx+panel.offsetLeft+10;
            var s = document.getElementById("bei").value;
            window.onmousemove = function() {
                sizego(s, tx);
            }
        }
        function sizego(as, sx) {
            event = arguments.callee.caller.arguments[0] || window.event || event;
            var x = event.clientX || event.pageX;
            var ox = x-sx;
            if (1 <= ox && ox <= 108) {
                sizebut.style.marginLeft = (ox-5)+"px";
                tiaos[4].style.width = ox+"px";
                basize = ox*as;
            }

        }
        //处理rgb调色板中按钮的位移
        function rgbato(but) {
            var i = 0;
            for (; i < rgbs.length; i++) {
                if (rgbs[i] != but) {} else {
                    break;
  .........完整代码请登录后点击上方下载按钮下载查看