|
在html5中，新增了很多實用的標簽，今天為大家介紹的是html5新增標簽，標簽是使用來規(guī)定一個圖形容器（畫布），然后通過腳本（ JavaScript等）來繪制圖形。 今天給大家做一個類似于電腦畫圖板的功能，我們先來看看效果圖：
好了，我們開始上代碼 HTML <div id="box"> <canvas id="canvas" width="800" height="600"></canvas> <dib id="tool"> <div id="pen_color"> <p>選中顏色</p> <div class="btn"> <input type="color" id="color" value="#000000" onchange="colorchange()"> <input type="text" class="num" value="#000000" readonly='readonly' /> </div> </div> <div id="color_thickness"> <p>畫筆粗細</p> <div class="btn"> <input type="range" id="range" min="1" max="10" value="1" onchange="change()" /> <input type="text" class="num" value="1" readonly='readonly' /> </div> </div> <div id="color_shape"> <p>畫筆樣式</p> <ul> <li> <img src="images/0.png"> </li> <li> <img src="images/1.png"> </li> <li> <img src="images/2.png"> </li> </ul> </div> <div id="operation"> 橡皮擦 </div> </dib> </div> CSS * {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
width: 100%;
height: 100%;
}
#box {
width: 100%;
height: 100%;
background: url(images/pic.jpg) no-repeat;
background-size: 100% 100%;
}
canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: #009688 1px solid;
background-color: #F9F4F1;
}
#tool {
width: 800px;
height: 60px;
background-color: red;
position: absolute;
left: 50%;
bottom: 50%;
transform: translate(-50%, 300px);
display: flex;
align-items: center;
}
#tool>div {
width: 25%;
height: 100%;
background: #009688;
text-align: center;
}
.num {
width: 60px;
height: 20px;
outline: none;
background-color: none;
}
.btn {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 10px;
}
p {
line-height: 20px;
}
ul {
width: 100%;
height: 40px;
display: flex;
justify-content: space-around;
}
ul li {
flex: 1;
height: 100%;
}
#color_shape img {
width: 100%;
height: 100%;
cursor: pointer;
}
JS //獲取畫布以及初始化畫布的屬性 let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); // 獲取畫筆顏色和畫筆粗細的顯示框 let num = document.querySelectorAll(".num"); // 獲取顏色選擇器 let Color = document.querySelector("#color") function colorchange() { // 把選擇器上面的顏色賦給畫筆以及顯示框 num[0].value = Color.value; ctx.strokeStyle = num[0].value; //畫筆的顏色 } // 獲取畫筆粗細的滾動條 let Range = document.querySelector("#range"); function change() { // 把畫筆粗細選擇器上的值賦給畫筆以及顯示框 num[1].value = Range.value; ctx.lineWidth = num[1].value; //畫筆的線寬也就是畫筆的粗細 } //是否開始繪制 let isDraw = false; //鼠標按下去 // 獲取畫筆的樣式 let pen = null; let oLi = document.querySelectorAll("li"); for (let i = 0; i < oLi.length; i++) { oLi[i].onclick = function() { pen = canvas.style.cursor; pen = "url(./" + i + ".png),auto"; } } canvas.onmousedown = function(event) { //鼠標按下去就說明開始繪圖了，true isDraw = true; //起始一條路徑，或重置當前路徑。 ctx.beginPath(); this.style.cursor = pen; } //鼠標按移動 canvas.onmousemove = function(event) { // txt.innerHTML = "鼠標移動 X："+event.offsetX+" Y:"+event.offsetY; //isDraw為true說明鼠標按下去了開始允許繪圖 //isDraw為false說明鼠標抬起來，繪圖結(jié)束。 if (isDraw) { //鼠標在畫布上x軸的位置，因為這個點擊事件是在畫布上。 //所以指的是在畫布上的鼠標位置，不會顯示鼠標離窗口的位置。 let x = event.offsetX; //鼠標在畫布上y軸的距離。 let y = event.offsetY; //開始畫線，每次鼠標移動x，y都會邊。 所以鼠標移動到那里坐標就傳進去，在那個位置就會畫個點（無數(shù)的點連起來就是一條線） ctx.lineTo(x, y) //繪制已定義的路徑。 ctx.stroke(); } } //鼠標抬起來 document.onmouseup = function() { //鼠標抬起來了，繪圖結(jié)束 isDraw = false; canvas.style.cursor = ""; } 功能展示好了全部的代碼就這樣完成了，當你熟悉了canvas后也可以做的更加炫酷
|
|
|
