2021-05-25 利用cssDOM创建一个绘画画布_在某个dom节点添加画布-优快云博客

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/117230516

这篇博客介绍了如何使用JavaScript实现一个动态画布功能，用户可以通过拖拽鼠标创建div节点，并能通过按钮调整画笔的宽度和颜色。点击'增加宽高'按钮增加节点大小，'减小宽高'按钮减小节点大小，'更改颜色'按钮则随机更改节点颜色。这个互动式的画布应用展示了JavaScript在网页交互方面的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路:

拖拽+动态创建节点

代码:

js:

    document.onmousedown = function() {
            document.onmousemove = function(eve) {
                var e = eve || window.event;
                //创建节点:鼠标移动都会新创建大量div
                var div = document.createElement("div");
                //设置绝对定位
                div.style.position = 'absolute';
                //让div的left和top分别是鼠标点击相对文档的横纵坐标
                div.style.left = e.pageX + 'px';
                div.style.top = e.pageY + 'px';
                //给div设置宽高颜色样式:画笔粗细颜色
                div.style.width = 15 + 'px';
                div.style.height = 15 + 'px';
                div.style.backgroundColor = "blue";
                //节点追加到页面
                document.body.appendChild(div);
            }
        }
        //鼠标抬起时清除鼠标移动
    document.onmouseup = function() {
        document.onmousemove = '';
        }

优化:

点击对应的按钮可以改变画笔粗细和颜色

代码:

html:

    <input type="button" value="增加宽高">
    <input type="button" value="减小宽高">
    <input type="button" value="更改颜色">
    <span></span>

js:

//1.获取节点
var input = document.querySelectorAll("input");
//2.设置初始化变量:宽高颜色
var w = 5,h = 5,c = "black";
//3.拖拽
document.onmousedown = function() {
        document.onmousemove = function(eve) {
            var e = eve || window.event;
            //创建节点:鼠标移动都会新创建大量div
            var div = document.createElement("div");
            //设置绝对定位
            div.style.position = 'absolute';
            //让div的left和top分别是鼠标点击相对文档的横纵坐标
            div.style.left = e.pageX + 'px';
            div.style.top = e.pageY + 'px';
            //给div设置宽高颜色样式:画笔粗细颜色
            //div.style.width = 15 + 'px';
            //div.style.height = 15 + 'px';
            //div.style.backgroundColor = "blue";
            //宽高颜色样式改为: 
            div.style.width = w + "px";
            div.style.height = h + "px";
            div.style.backgroundColor = c;
            //节点追加到页面
            document.body.appendChild(div);
        }
    }
document.onmouseup = function() {document.onmousemove = '';}

//4.给三个按钮绑定鼠标点击事件
input[0].onclick = function() {w += 2;h = w;}//点击"增加宽高"按钮
input[1].onclick = function() {w -= 2;h = w;}//点击"减小宽高"按钮
input[2].onclick = function() {c = getColor()}//点击颜色,更改颜色为随机颜色
 
//5.函数封装
 //获取随机颜色
function getColor() {
    var arr = ["#"];
    for (var i = 0; i < 6; i++) {
        arr.push(getNum(0, 15).toString(16));
    }
    arr = arr.join('');
    return arr;
}
//获取随机数
function getNum(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);}