纯Javascript做的表达式可绘图函数计算器

已于 2023-05-26 14:59:40 修改
阅读量200 收藏
点赞数
文章标签： javascript 开发语言
于 2023-05-26 14:49:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42030500/article/details/130886679
版权

浅浅地学习了JavaScript和基本html语法。觉得自己的安卓手机的计算器比较简陋，参考csdn某些大佬的文章，自己改写了一个可绘图函数表达式计算器。

支持+ - * / ^和 sin,cos,tan,asin,acos,atan,abs,sqrt,ln,lg,floor,ceil,int 数学函数
如果表达式包含x就做函数画图，没有x就直接计算。

效果图如下：

 

附代码：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>函数图像绘制工具</title>
        
<script language="javascript">
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) {
    //支持+ - * / ^和 sin,cos,tan,asin,acos,atan,abs,sqrt,ln,lg,floor,ceil,int 数学函数
    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 "asin":
            {
                return Math.asin(x);
                break;
            }
        case "acos":
            {
                return Math.acos(x);
                break;
            }
        case "atan":
            {
                return Math.atan(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为底 lhlnote 比较奇怪
        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 clearDraw() {
    // lhlnote 清空画布
    CONTEXT_2D.clearRect(0, 0, FUN_IMG_WIDTH, FUN_IMG_HEIGHT);
    getTable();
}
function increaseDraw() {
    // lhlnote 放大画布
    var times = 0.9;
    xLeftValue = xLeftValue * times;
    xRightValue = xRightValue * times;
    yLeftValue = yLeftValue * times;
    yRightValue = yRightValue * times;
    reDraw();
    update();
}
function decreaseDraw() {
    // lhlnote 缩小画布
    var times = 0.9;
    xLeftValue = xLeftValue / times;
    xRightValue = xRightValue / times;
    yLeftValue = yLeftValue / times;
    yRightValue = yRightValue / times;
    reDraw();
    update();
}
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) {
    //y = Calc(funcExpression, ['x'], [x]);
    //console.log("Value--"+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");
    //console.log("group.length--"+group.length);
    var x, y;
    var lax, lay;
    var px, py
    var color, outSide, type
    var ValueL, ValueR, ValueS, isDrawLine, tmp, TMP;
    var haveX = "";
    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;
        //正则表达式方法2 在数字和字母之间插入* 例如2sin(x)改为2*sin(x)。$1表示第一个括号匹配字符串，以此类推
        funcExpression = funcExpression.replace(/([0-9])([a-z])/gi, '$1*$2');
        //console.log("funExp--" + funcExpression);
        // 是否画线（默认画点）
        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]);
            my1=y;
            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;
        }
        //console.log("py--"+my1);
        //判断是否含有x lhlnote
        //console.log("funcExpression--"+funcExpression);
        if(funcExpression.includes('x')){
            haveX = haveX + "[" + k + "]" +":含x; \n";
        }
        else{
            haveX = haveX + "[" + k + "]" + "无x,结果是 " + my1 +"; \n";
        }
        showResult.innerText = haveX;
    }
}
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);
}
</script>
        <style>
            #div-img {
                /* 此决定画布的宽高 */
                width: 500px;
                height: 500px;
            }
            #input-controller {
                padding: 10px;
                background-color: azure;
            }
        </style>
    </head>
    <body>
    
    
        <div id="input-controller">
        <div style="color:#00d">支持+ - * / ^和 sin,cos,tan,asin,acos,atan,abs,sqrt,ln,lg,floor,ceil,int 数学函数<br>
        如果表达式包含x就做函数画图，没有x就直接计算。</div>
            <div id="function">
                <button οnclick="Add()">添加函数</button>
                <span id="mod" style="display:none" name="0">
                    <input type="color" />y=
                    <input type="text" value="x^3" name="Fun"/>
                    <button οnclick="Delete(this.parentNode)">Delete</button>
                    <input type="checkbox" οnclick="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><br>
                <span id="showResult" style="font-size:18px;color:red">Result</span>
            </div>
            <button οnclick="change()">画图/计算</button>
            <button οnclick="clearDraw()">清空画布</button>
            <button οnclick="increaseDraw()">放大</button>
            <button οnclick="decreaseDraw()">缩小</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>

//如果需要下载完整源代码，请到：sbdlhl/JavaScriptCalandDraw - 码云 - 开源中国 (gitee.com)

sbdlhl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
htm+JS实现绘制数学函数图像
cnds123的专栏
10-29 2041
htm+JS实现绘制数学函数图像
基于 function-plot.js 开源库绘制数学函数图像实现兼文档翻译
Specif1c的博客
06-04 3354
前段时间移动项目想实现一个能实时绘制数学函数图像的H5小应用, app 通过 webview 进行嵌入，目前网上提供了大致有两种方法：①、Chart.js 结合 Plugins 绘制 ===> https://www.bianchengquan.com/article/475747.html②、原生 JavaScript + canvas 计算描点绘制 ===> https://blog.csdn.net/weixin_30341745/article/details/94964723经过测试这两个方法应对
JS绘制数学函数图
xxgxgx的专栏
05-14 4233
JS绘制数学函数图 body{ margin: 0px; padding: 0px; } //辅助函数 function $(id){return document.getElementById(id)}; /** * 绘图对象 * 包含各个绘图函数，比如画点，线段，多边形，
纯JS绘制数学函数
GuardAngelY的专栏
05-13 866
今天闲来无事用js写了个数学绘图包，还不算完整，不过总出现了雏形。 绘图对象Plot，包含了JS画点，JS画线，JS画正弦sin，JS画余弦cos，tan，圆，多边形。 可设置原点位置，画笔颜色，画笔粗细，坐标线颜色。 其实原理很简单，用长1px宽1px的div模拟点，由点及线，由线及面。 贴上来权当相互学习，以免JS新手觉得js画图是多神秘的事情。
简单描点曲线实例
Pretender
07-19 1061
  index.htmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">血压曲线图.style1 {    font-size: x-small;}.STYLE2 { font-family: "宋体"; font-weight: bold;}血
一个简易的网页计算器
04-15
4. 计算逻辑：编写JavaScript函数来处理数学运算，可能需要用到`eval()`函数或者自定义解析表达式的算法。 5. 更新结果：计算完成后，用JavaScript修改显示区域的值，显示计算结果。 通过这个项目，你可以深入理解...
Js结合CSS3技术实现漂亮的网页计算器功能.rar
07-10
在本项目中，"Js结合CSS3技术实现漂亮的网页计算器功能.rar"，我们将探讨如何使用JavaScript和CSS3来创建一个美观且实用的网页计算器。这个计算器不仅提供了基本的数学运算功能，同时也展示了HTML5事件处理和CSS3的...
graphing-calc
03-05
2. **函数解析**：为了绘制函数图像，项目需要一个函数解析器，将用户输入的数学表达式转化为可计算的形式。 3. **坐标轴和网格**：计算器会包含X轴和Y轴，以及网格线，帮助用户可视化函数图像。 4. **绘图功能**：...
Progetto-L21
04-17
- **数学库**：如NumPy、SciPy、matplotlib（Python）或Desmos API（JavaScript），它们提供了函数解析和绘图功能。 - **用户界面**：设计直观易用的图形用户界面（GUI）或网页界面，可能需要用到Tkinter（Python）...
2021-2022计算机二级等级考试试题及答案No.18592.docx
10-30
5. **输出设备**包括打印机、显示器和绘图仪（D），它们将计算机处理的信息转化为人类可读的形式。 6. **字符串换行**在编程中，`\n`通常用于表示换行，因此在选项A中，两行文字不会被显示为一行。 7. **选择**（A...
js绘图，绘制各种图形，纯js
05-25
js绘图，绘制各种图形，纯js，还没正式用过
JavaScript画基本图形函数
10-14
JavaScript画基本图形函数，包含两种实现方式：table方式和div方式。含详细的函数说明。
纯JS 绘制数学函数
01-21
绘图对象Plot，包含了JS画点，JS画线，JS画正弦sin，JS画余弦cos，tan，圆，多边形。 可设置原点位置，画笔颜色，画笔粗细，坐标线颜色。 其实原理很简单，用长1px宽1px的div模拟点，由点及线，由线及面。 贴上来权当相互学习，以免JS新手觉得js画图是多神秘的事情。 JS绘制数学函数图 body{ margin: 0px; padding: 0px; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
javascript绘图函数库
11-21
用javascript绘图是个比较困难繁琐的事情，现提供一个绘图函数库以供用时可直接调用
HTML+JS[JavaScript]绘制sin函数
qq_37433280的博客
02-23 890
HTML+javascript结合画布<canvas>绘制二维坐标平面和一个sin x 函数
用Html5制作的一款数学教学程序Function Graphics(绘制函数图的程序)
Yorhom's Game Box
04-04 322
最近我不仅对游戏开发感兴趣，还对函数图感兴趣，特此我开发了这个程序。以下是一些介绍和下载演示地址，喜欢的朋友可以看看： 一，产品名片 产品名：Function Graphics 版本： 0.1 开发者：Yorhom Wang 首次发行时间：2013年 4月4日 分类：教学程序 功能：画出一，二，三次函数图象 开发语言：javascript&amp;html5 二，怎么...
P5.js开发之——2D图形绘制(3)
我的博客
10-13 1512
一 概述 本文介绍通过P5.js绘制常见的2D形状 编号 图形 函数 1 弧形 arc() 2 椭圆形 ellipse() 3 圆 circle() 4 直线 line() 5 点 point() 6 四角形 quad() 7 方形 rect() 8 方形 square() 9 三角形 triangle() 二 项目创建 2.1 通过VSCode插件创建P5.js项目 index.html sketch.js 2.2 新建libs文件夹，并将p5.j
javascript自制函数图像生成器
weixin_30341745的博客
05-04 2283
　　出于某种目的想做这个东西，顺便可以提供给GMA的用户&&放在博客园。 　　实现上只是简单的描点，加上一个相邻两点连线的开关，完全没有技术含量。而且函数图像一旦多起来就会变卡。 　　瓶颈在隐函数的绘制，这个超烦，计算量一下子就上去了。我的做法是把画布格成很多个60*60的小方格，先扫一遍方格边框上有没有零点，有就进这个方格绘图，没有就不管它了。绘图的部分也牺牲了精度换取速度，...
快速编程JS初级教程4-2 画矩形，画函数图像
钢七连软件项目管理和开发
07-17 1111
函数图像，就是游戏元素的运动轨迹。超级玛丽，跳一跳，是抛物线。还有折线，波浪线。王者荣耀里，有大量的扇形攻击范围。 还有六边形的攻击范围，等等各式各样。 一、鼠标点击两下，画一个矩形 代码如下：用一个整数数组存放左上角、右下角的坐标[x1,y1,x2,y2]，四个整数。 &lt;script type="text/javascript"&gt; &lt;!-- var dot=new...
JavaScript正则表达式与递归函数实战应用详解
在本文档"JavaScript正则表达式校验与递归函数实际应用实例解析.docx"中，主要探讨了JavaScript编程中的两个关键主题：正则表达式校验和递归函数的实际运用。正则表达式是一种强大的文本处理工具，用于验证字符串...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值