HTML + JavaScript function painting image

Others 2019-12-20 14:39:14 views: null 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>函数图像绘制工具</title>
        <script type="text/javascript" src="js/funcImg.js"></script>
        <style>
            #div-img {
                /* 此决定画布的宽高 */
                width: 500px;
                height: 500px;
            }
            
            #input-controller {
                padding: 10px;
                background-color: azure;
            }
        </style>
    </head>

    <body>
        <div id="input-controller">
            <div id="function">
                <button onclick="Add()">添加函数</button>
                <span id="mod" style="display:none" name="0">
                    <input type="color"/>y=
                    <input type="text" value="x^3" name="Fun"/>
                    <button onclick="Delete(this.parentNode)">Delete</button>
                    <input type="checkbox" onclick="reDraw()" checked="checked"/>Draw Line
                </span>
            </div>

            <div id="option">
                X：<input id="xLeftValue" /> ~
                <input id="xRightValue" />
                <br> Y：
                <input id="yLeftValue" /> ~
                <input id="yRightValue" />
                <br>

                <span id="show-size">Size:</span>
            </div>
            <button onclick="change()">画图</button>
        </div>
        <div id="main">

            <h1>函数图像绘制工具</h1>
            <div id="div-img">
                <canvas id="graph"></canvas>
            </div>
        </div>

    </body>
    <script>
        const FONT_STYLE = "10px 黑体";
        const MIN = 1e-4;
        const MAX = 1e8;
        const EPS = 1e-12;
        const CANVAS = $("graph");
        const CONTEXT_2D = CANVAS.getContext("2d");
        const FUN_IMG_WIDTH = CANVAS.parentNode.clientWidth;
        const FUN_IMG_HEIGHT = CANVAS.parentNode.clientHeight;
        var xLeftValue = -FUN_IMG_WIDTH / 100; // x最左的值
        var xRightValue = FUN_IMG_WIDTH / 100;
        var yLeftValue = -FUN_IMG_HEIGHT / 100;
        var yRightValue = FUN_IMG_HEIGHT / 100;
        var tableX, tableY, countX, countY;
        var funStage = 0,
            mouseX, mouseY;
        var tmp;
    </script>
    <script>
        CANVAS.width = FUN_IMG_WIDTH;
        CANVAS.height = FUN_IMG_HEIGHT;
        $("show-size").innerHTML = "Size：" + FUN_IMG_WIDTH + "*" + FUN_IMG_HEIGHT;

        CANVAS.onmousedown = function(ob) {
            mouseX = ob.layerX;
            mouseY = ob.layerY;
            funStage = 1;
        }
        CANVAS.onmousemove = function(ob) {
            if(funStage != 1) {
                return;
            }
            var NoX, NoY, det;
            NoX = ob.layerX;
            NoY = ob.layerY;
            det = (mouseX - NoX) / FUN_IMG_WIDTH * (xRightValue - xLeftValue);
            xLeftValue += det;
            xRightValue += det;
            det = (NoY - mouseY) / FUN_IMG_HEIGHT * (yRightValue - yLeftValue);
            yLeftValue += det;
            yRightValue += det;
            mouseX = NoX;
            mouseY = NoY;
            reDraw();
            update();
        }
        CANVAS.onmouseup = function(ob) {
            if(funStage == 1) {
                funStage = 0;
                reDraw();
            }
        }
        CANVAS.onmouseleave = function(ob) {
            if(funStage == 1) {
                funStage = 0;
                reDraw();
            }
        }
        CANVAS.onmousewheel = function(ob) {
            // 取消事件的默认动作
            ob.preventDefault();
            // 放大的比例
            var ScaleRate = 0.9;
            var detail;
            if(ob.wheelDelta) {
                detail = ob.wheelDelta;
            } else if(ob.detail) {
                detail = ob.detail;
            }
            if(detail > 0) {
                scale(ob.layerX, FUN_IMG_HEIGHT - 1 - ob.layerY, ScaleRate);
            } else {
                scale(ob.layerX, FUN_IMG_HEIGHT - 1 - ob.layerY, 1 / ScaleRate);
            }
            reDraw();
            update();
        }
        // 初始化
        reDraw();
        update();
        Add();
    </script>

</html>

funcImg.js

function $(id) {
    return document.getElementById(id);
}

function getRandomColor() {
    var color = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
    return color;
}

function FunWork(f, x) {
    switch(f) {
        case "":
            {
                return x;
                break;
            }
        case "sin":
            {
                return Math.sin(x);
                break;
            }
        case "cos":
            {
                return Math.cos(x);
                break;
            }
        case "tan":
            {
                return Math.tan(x);
                break;
            }
        case "abs":
            {
                return Math.abs(x);
                break;
            }
        case "sqrt":
            {
                return Math.sqrt(x);
                break;
            }
        case "ln":
            {
                return Math.log(x);
                break;
            }
        case "log":
            {
                return Math.log(x) / Math.LN2;
                break;
            } //2为底
        case "lg":
            {
                return Math.log(x) / Math.LN10;
                break;
            } //10为底
        case "floor":
            {
                return Math.floor(x);
                break;
            }
        case "ceil":
            {
                return Math.ceil(x);
                break;
            }
        case "int":
            {
                return parseInt(x);
                break;
            }
        default:
            {
                return NaN;
                break;
            }
    }
}

function ChangeToPointY(y) {
    return FUN_IMG_HEIGHT - 1 - parseInt((y - yLeftValue) / (yRightValue - yLeftValue) * FUN_IMG_HEIGHT);
}

function isChar(c) {
    return(c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z');
}

function isDigit(c) {
    return c >= '0' && c <= '9';
}

function priority(c) {
    switch(c) {
        case '(':
            return 0;
            break;
        case '+':
            return 1;
            break;
        case '-':
            return 1;
            break;
        case '*':
            return 2;
            break;
        case '/':
            return 2;
            break;
        case '^':
            return 3;
            break;
        default:
            return -1;
            break;
    }
}
// 是运算符
function isOpt(c) {
    return priority(c) != -1;
}

function singleCalc(c, a, b) {
    if(c == '+') {
        return a + b;
    } else
    if(c == '-') {
        return a - b;
    } else
    if(c == '*') {
        return a * b;
    } else
    if(c == '/') {
        return a / b;
    } else
    if(c == '^') {
        return Math.pow(a, b);
    } else {
        return NaN;
    }
}

function getTable() {
    tmp = (xRightValue - xLeftValue + EPS) / 20;

    tableX = 1;
    countX = 0;
    countY = 0;
    while(tableX < tmp) {
        tableX *= 10;
    }
    while(tableX / 10 > tmp) {
        tableX /= 10;
        countX++;
    }
    if(tableX >= 1) {
        countX = 0;
    }
    if(tableX / 5 > tmp) {
        tableX /= 5;
        countX++;
    } else if(tableX / 2 > tmp) {
        tableX /= 2;
        countX++;
    }
    var i = parseInt(xLeftValue / tableX) + (xLeftValue > 0)
    for(; i * tableX < xRightValue; i++) {
        if(i == 0) {
            // y轴
            CONTEXT_2D.fillStyle = "black";
        } else {
            // 普通竖线
            CONTEXT_2D.fillStyle = "#CDB7B5";
        }
        tmp = (i * tableX - xLeftValue) / (xRightValue - xLeftValue) * FUN_IMG_WIDTH;
        var _width = 1;
        var _height = FUN_IMG_HEIGHT;
        CONTEXT_2D.fillRect(tmp, 0, _width, _height);
        // 竖线上的数字
        CONTEXT_2D.fillStyle = "red";
        CONTEXT_2D.font = FONT_STYLE;
        var _text = (i * tableX).toFixed(countX);
        var _x = tmp + 2;
        var _y = 10;
        CONTEXT_2D.fillText(_text, _x, _y);
    }
    tmp = (yRightValue - yLeftValue + EPS) / 20;
    tableY = 1;

    while(tableY < tmp) {
        tableY *= 10;
    }
    while(tableY / 10 > tmp) {
        tableY /= 10, countY++;
    }
    if(tableY / 5 > tmp) {
        tableY /= 5, countY++;
    } else if(tableY / 2 > tmp) {
        tableY /= 2, countY++;
    }
    if(tableY >= 1) {
        countY = 0;
    }
    var i = parseInt(yLeftValue / tableY) + (yLeftValue > 0);
    for(; i * tableY < yRightValue; i++) {
        // 横线
        if(i == 0) {
            // x轴
            CONTEXT_2D.fillStyle = "black";
        } else {
            // 普通横线
            CONTEXT_2D.fillStyle = "#CDB7B5";
        }
        tmp = (i * tableY - yLeftValue) / (yRightValue - yLeftValue) * FUN_IMG_HEIGHT;
        CONTEXT_2D.fillRect(0, FUN_IMG_HEIGHT - 1 - tmp, FUN_IMG_WIDTH, 1);
        // 横线上的数字
        CONTEXT_2D.fillStyle = "blue";
        CONTEXT_2D.font = FONT_STYLE;
        CONTEXT_2D.fillText((i * tableY).toFixed(countY), 0, FUN_IMG_HEIGHT - 1 - tmp);
    }
}

function drawArc(x, y) {
    CONTEXT_2D.beginPath();
    // arc(弧形),画圆
    CONTEXT_2D.arc(x, y, 1, 0, Math.PI * 2);
    CONTEXT_2D.closePath();
    CONTEXT_2D.fill();
}

function drawLine(lx, ly, px, py) {
    CONTEXT_2D.beginPath();
    CONTEXT_2D.moveTo(lx, ly);
    CONTEXT_2D.lineTo(px, py);
    CONTEXT_2D.closePath();
    CONTEXT_2D.stroke(); // 绘制
}

function reDraw() {
    CONTEXT_2D.clearRect(0, 0, FUN_IMG_WIDTH, FUN_IMG_HEIGHT);
    getTable();
    getFunction();
}

function change() {
    xLeftValue = parseFloat($("xLeftValue").value);
    xRightValue = parseFloat($("xRightValue").value);
    yLeftValue = parseFloat($("yLeftValue").value);
    yRightValue = parseFloat($("yRightValue").value);
    reDraw();
}

function update() {
    $("xLeftValue").value = xLeftValue;
    $("xRightValue").value = xRightValue;
    $("yLeftValue").value = yLeftValue;
    $("yRightValue").value = yRightValue;
}

function scale(x, y, times) {
    if(x < 0 || x >= FUN_IMG_WIDTH || y < 0 || y >= FUN_IMG_HEIGHT) return;

    if(times < 1 && (xRightValue - xLeftValue < MIN || yRightValue - yLeftValue < MIN)) {
        return;
    }
    if(times > 1 && (xRightValue - xLeftValue > MAX || yRightValue - yLeftValue > MAX)) {
        return;
    }

    x = xLeftValue + (xRightValue - xLeftValue) / FUN_IMG_WIDTH * x;
    y = yLeftValue + (yRightValue - yLeftValue) / FUN_IMG_HEIGHT * y;
    xLeftValue = x - (x - xLeftValue) * times;
    xRightValue = x + (xRightValue - x) * times;
    yLeftValue = y - (y - yLeftValue) * times;
    yRightValue = y + (yRightValue - y) * times;
}

function Calc(fun, X, Value) {
    var number = new Array(),
        opt = new Array(),
        F = new Array(),
        now = 0,
        f = "",
        tmp, a, b, sign = 1,
        base = 0,
        j;
    for(var i = 0; i < fun.length; i++) {
        for(j = 0; j < X.length; j++)
            if(X[j] == fun[i]) {
                if(i == 0 || isOpt(fun[i - 1])) now = Value[j];
                else now *= Value[j];
                break;
            }
        if(j == X.length)
            if(fun[i] == '(') F.push(f), f = "", opt.push('(');
            else
        if(fun[i] == ')') {
            number.push(now * sign);
            now = 0;
            sign = 1;
            base = 0;
            while((tmp = opt.pop()) != '(') {
                b = number.pop();
                a = number.pop();
                tmp = singleCalc(tmp, a, b);
                number.push(tmp);
            }
            now = FunWork(F.pop(), number.pop());
        } else
        if(fun[i] == '.') base = 1;
        else
        if(fun[i] == '+' && (i == 0 || priority(fun[i - 1]) != -1));
        else
        if(fun[i] == '-' && (i == 0 || priority(fun[i - 1]) != -1)) sign = -1;
        else
        if(fun[i] == 'e')
            if(i == 0 || isOpt(fun[i - 1])) now = Math.E;
            else now *= Math.E;
        else
        if(fun[i] == 'p' && fun[i + 1] == 'i') {
            if(i == 0 || isOpt(fun[i - 1])) now = Math.PI;
            else now *= Math.PI;
            i += 1;
        } else
        if(isDigit(fun[i]))
            if(base == 0) now = now * 10 + (fun[i] - '0');
            else base /= 10, now += base * (fun[i] - '0');
        else
        if(isChar(fun[i])) f += fun[i];
        else if(isOpt(fun[i])) {
            number.push(now * sign);
            now = 0;
            sign = 1;
            base = 0;
            var s = priority(fun[i]);
            if(s == -1) return 0;
            while(s <= priority(opt[opt.length - 1])) {
                b = number.pop();
                a = number.pop();
                tmp = singleCalc(opt.pop(), a, b);
                number.push(tmp);
            }
            opt.push(fun[i]);
        }
    }
    number.push(now * sign);
    while(opt.length > 0) {
        b = number.pop();
        a = number.pop();
        tmp = singleCalc(opt.pop(), a, b);
        number.push(tmp);
    }
    return number.pop();
}

function getFunction() {
    // group：函数（可能是复数）
    var group = document.getElementsByName("Fun");
    var x, y;
    var lax, lay;
    var px, py
    var color, outSide, type
    var ValueL, ValueR, ValueS, isDrawLine, tmp, TMP;

    for(var k = 1; k < group.length; k++) {

        var _funcItem = group[k].parentNode;

        outSide = 1;
        //type = _funcItem.children[0].value;
        // 颜色
        color = _funcItem.children[0].value;
        // 函数表达式
        funcExpression = group[k].value;
        // 是否画线（默认画点）
        isDrawLine = _funcItem.children[3].checked;

        CONTEXT_2D.fillStyle = CONTEXT_2D.strokeStyle = color;

        for(var i = 0; i < FUN_IMG_WIDTH; i++) {
            x = xLeftValue + (xRightValue - xLeftValue) / FUN_IMG_WIDTH * i;
            y = Calc(funcExpression, ['x'], [x]);
            if(isNaN(y)) {
                continue;
            }
            px = i;
            py = ChangeToPointY(y);
            if(y >= yLeftValue && y < yRightValue) {
                // 画圆
                drawArc(px, py);
                if(isDrawLine) {
                    drawLine(lax, lay, px, py);
                }
                outSide = 0;
            } else {
                if(isDrawLine) {
                    if(!outSide) {
                        drawLine(lax, lay, px, py);
                    }
                } else {}
                outSide = 1;
            }
            lax = px;
            lay = py;
        }
    }
}

function Add() {
    var newInput = $("mod").cloneNode(true);
    newInput.style.display = "block";
    newInput.children[0].value = getRandomColor();
    $("function").appendChild(newInput);
}

function Delete(node) {
    node.parentNode.removeChild(node);
}

Guess you like

Origin www.cnblogs.com/tigerlion/p/12072713.html
Recommended
Ranking
How cascading public network servers and network companies with free softether, forming a network penetration
axios package
C implementation creates multiple txt file and named to the natural numbers, then the resulting decimal data written txt file
ctfhub技能树 信息泄露 目录遍历 PHPINFO 备份文件下载
The real version of graduation = #"Massey University graduation certificate in New Zealand" is exactly the same as the original MQU certificate
Examples of simple web application architecture
MATLAB graphics drawing-polar and logarithmic images
java里的this和super关键字使用（附代码实例操作）
Markdown을 사용하여 다양한 플랫폼과 호환되고 보기 쉽고 매우 아름다운 Readme 또는 기사를 작성하는 방법은 무엇입니까? 자세한 그림, 도구, 예제가 포함된 템플릿이 첨부되어 있습니다.
What does java startup hardcode correspond to?
Daily
More
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(31)
2024-04-16(23)
2024-04-15(5)
2024-04-14(0)

Code World

© 2018 codetd.com