|
在html5中，新增了很多實(shí)用的標(biāo)簽，今天為大家介紹的是html5新增標(biāo)簽，標(biāo)簽是使用來(lái)規(guī)定一個(gè)圖形容器（畫(huà)布），然后通過(guò)腳本（ JavaScript等）來(lái)繪制圖形。 今天給大家做一個(gè)類似于電腦畫(huà)圖板的功能，我們先來(lái)看看效果圖：
好了，我們開(kāi)始上代碼 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>畫(huà)筆粗細(xì)</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>畫(huà)筆樣式</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 //獲取畫(huà)布以及初始化畫(huà)布的屬性 let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); // 獲取畫(huà)筆顏色和畫(huà)筆粗細(xì)的顯示框 let num = document.querySelectorAll(".num"); // 獲取顏色選擇器 let Color = document.querySelector("#color") function colorchange() { // 把選擇器上面的顏色賦給畫(huà)筆以及顯示框 num[0].value = Color.value; ctx.strokeStyle = num[0].value; //畫(huà)筆的顏色 } // 獲取畫(huà)筆粗細(xì)的滾動(dòng)條 let Range = document.querySelector("#range"); function change() { // 把畫(huà)筆粗細(xì)選擇器上的值賦給畫(huà)筆以及顯示框 num[1].value = Range.value; ctx.lineWidth = num[1].value; //畫(huà)筆的線寬也就是畫(huà)筆的粗細(xì) } //是否開(kāi)始繪制 let isDraw = false; //鼠標(biāo)按下去 // 獲取畫(huà)筆的樣式 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) { //鼠標(biāo)按下去就說(shuō)明開(kāi)始繪圖了，true isDraw = true; //起始一條路徑，或重置當(dāng)前路徑。 ctx.beginPath(); this.style.cursor = pen; } //鼠標(biāo)按移動(dòng) canvas.onmousemove = function(event) { // txt.innerHTML = "鼠標(biāo)移動(dòng) X："+event.offsetX+" Y:"+event.offsetY; //isDraw為true說(shuō)明鼠標(biāo)按下去了開(kāi)始允許繪圖 //isDraw為false說(shuō)明鼠標(biāo)抬起來(lái)，繪圖結(jié)束。 if (isDraw) { //鼠標(biāo)在畫(huà)布上x(chóng)軸的位置，因?yàn)檫@個(gè)點(diǎn)擊事件是在畫(huà)布上。 //所以指的是在畫(huà)布上的鼠標(biāo)位置，不會(huì)顯示鼠標(biāo)離窗口的位置。 let x = event.offsetX; //鼠標(biāo)在畫(huà)布上y軸的距離。 let y = event.offsetY; //開(kāi)始畫(huà)線，每次鼠標(biāo)移動(dòng)x，y都會(huì)邊。 所以鼠標(biāo)移動(dòng)到那里坐標(biāo)就傳進(jìn)去，在那個(gè)位置就會(huì)畫(huà)個(gè)點(diǎn)（無(wú)數(shù)的點(diǎn)連起來(lái)就是一條線） ctx.lineTo(x, y) //繪制已定義的路徑。 ctx.stroke(); } } //鼠標(biāo)抬起來(lái) document.onmouseup = function() { //鼠標(biāo)抬起來(lái)了，繪圖結(jié)束 isDraw = false; canvas.style.cursor = ""; } 功能展示好了全部的代碼就這樣完成了，當(dāng)你熟悉了canvas后也可以做的更加炫酷
|
|
|
