簡易繪圖板

span{position: fixed;left:20px;bottom: 20px;}div{width:20px;height:20px;border-radius: 50%;background: black;position: absolute;}input{position: relative;z-index: 1;} <input type="color" id="color"><input type="button" value="+" id="add"><input type="button" value="-" id="diff"><span></span> // 選擇元素var ospan = document.querySelector("span");var ocolor = document.getElementById("color");var oadd = document.getElementById("add");var odiff = document.getElementById("diff");// 設置默認的顏色和寬高var c="#000";var w=h=10;// 改變顏色ocolor.onchange = function(){// console.log(this.value);c = this.value;}// 增寬高oadd.onclick = function(){w += 5;h += 5;}// 減寬高odiff.onclick = function(){if(w <= 5){w=h=5;}else{w -= 5;h -= 5;}}document.onmousemove = function(eve){var e = eve || window.event;// 將坐標實時顯示在元素內ospan.innerHTML = e.pageX + ", " + e.pageY;// 鼠標移動時,創建元素,插入頁面var div = document.createElement("div");document.body.appendChild(div);// 設置元素位置為,鼠標當前的位置div.style.left = e.pageX + "px";div.style.top = e.pageY + "px";// 移動時，設置顏色div.style.backgroundColor = c;// 設置寬高div.style.width = w + "px";div.style.height = h + "px";}

總結

以上是生活随笔為你收集整理的简易绘图板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。