1.用js来操作画图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画板</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        #canvas {
            border: 1px solid pink;
            width: 3000px;
            height: 3000px;
            background-color: #ffff;
        }
    </style>

</head>

<body>
    <div id="canvas">

    </div>
    <script>
        // canvas.onclick = (e) => {
        // 屏幕画点
        canvas.onmousemove = (e) => {
            // 鼠标移动画线
            // console.log(e)
            // console 调试大法
            console.log(e.clientX)
            console.log(e.clientY)
            let div = document.createElement('div')
                // 这种方式叫做API
                // 让当前网页创建一个标签
            div.style.position = 'absolute'
                // 绝对定位
            div.style.left = e.clientX + 'px'
                // 定位的X坐标
            div.style.top = e.clientY + 'px'
                // 定位的是Y的坐标
                // div.style.border='1px solid red '
                // 边框为红色·
            div.style.width = '6px '
                // 宽度6像素
            div.style.height = '6px'
                // 高度6像素
            div.style.marginLeft = '-3px'
                // 向左的外边距为-3像素
            div.style.marginTop = '-3px'
                // 向上的外边距的-3像素
            div.style.borderRadius = '50%'
                // 将方形变为圆形
            div.style.backgroundColor = 'black'
                // 背景颜色为黑色
            canvas.appendChild(div)
                // 将div 打印出来
        }
    </script>
</body>

</html>

效果如图所示：

结论：JS 操作DOM是比较慢的，它是跨线程的。如何解决低效问题呢？

引入：canvas 更多知识

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画板</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        #canvas {
            /* border: 1px solid pink; */
            /* width: 3000px; */
            /* height: 3000px; */
            background-color: #fff;
            display: block;
        }
        
        body {
            border: 1px solid red;
        }
    </style>

</head>

<body>
    <canvas id="canvas" width="100 " height="100">

    </canvas>
    <script>
        var canvas = document.getElementById("canvas");
        // let documentWidth = document.body.clientWidth
        // 将捕获的屏幕的宽度赋值于canvas的宽度
        // let documentHeight = document.body.clientHeight
        //  将捕获的屏幕的高度赋值于canvas的高度
        // canvas.width = document.body.clientWidth
        // 直接赋值不要中间量
        canvas.width = document.documentElement.clientWidth
            // 获取的是文档的宽度
            // canvas.height = document.body.clientHeight
            //  直接赋值不要中间量
        canvas.height = document.documentElement.clientHeight
            // 获取的是文档的高度
            // console.log(document.body.clientWidth)
            // 获取屏幕的宽度
            // console.log(document.body.clientHeight)
            // 获取屏幕的高度

        var ctx = canvas.getContext("2d");
        let painting = false
            // 打印的初始化是不工作的
        ctx.fillStyle = "blue";
        // 填充颜色为蓝色
        // ctx.fillRect(10, 20, 66, 60);
        // 具体位置
        canvas.onmousedown = () => {
            painting = true
                // 鼠标按下的话开始打印
        }
        canvas.onmousemove = (e) => {
            if (painting === true) {
                // 如果打印的是正确的取值，就开始执行
                // console.log(e.clientX)
                // console.log(e.clientY)
                // ctx.fillRect(e.clientX - 5, e.clientY - 5, 10, 10);
                // 画矩形
                ctx.beginPath();
                ctx.arc(e.clientX, e.clientY, 50, 0, 2 * Math.PI)
                    // 圆心的位置X,Y坐标，半径  从零到360度是一个圆
                ctx.stroke();
                // 以上三行代码是画圆形

            } else {
                // 否的话什么也不做
                console.log("nothing!")
            }
            canvas.onmouseup = () => {
                painting = false
            }



        }
    </script>
</body>

</html>

1.画方形连线示意图

ctx.fillRect(e.clientX - 5, e.clientY - 5, 10, 10);
捕捉鼠标的中心位置，画出方形

2.鼠标按下开始作图和鼠标放开画图结束

3.画圆形

ctx.beginPath();
                ctx.arc(e.clientX, e.clientY, 50, 0, 2 * Math.PI)
                    // 圆心的位置X,Y坐标，半径  从零到360度是一个圆
                ctx.stroke();

4.画圆形连线

总结：用canvas画图的效率高于第一种方式。其中值得注意的是：canvas的宽和高可以通过JS来获取。

代码如下：

console.log(document.body.clientWidth)
console.log(document.body.clientHeight)

canva画图初览

1.用js来操作画图