HTML5 canvas實現畫板功能

HTML5新標簽：

<canvas></canvas>定義畫布，需要配合js完成功能。在canvas標簽內部的內容為不支持canvas時顯示的內容。行內樣式width與height設置畫布大小。用css設置畫布大小，可能會導致<canvas>元素中展示的內容變形。

<input type = "color"> 定義拾色器

<input type = "range">定義數據值控件，min,max設置最大值與最小值，無單位。

html代碼如下：

<div class="wrapper">
<canvas class="board" width="600px" height="300px"></canvas>
<div class="btn">
<input type="color" class="color">
<input type="button" value="清屏" class="clear">
<input type="button" value="撤銷" class="reset">
<input type="button" value="橡皮" class="eraser">
<input type="range" class="range" min="2" max="20" value="5">
</div>
</div>
自定義<input type = "range">樣式

 

自定義<input type = "color">樣式

 

css代碼如下：

* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow-x: hidden;
background-image: url(xhr.jpg);
background-size: 100% 100%;
}
.wrapper .board {
width: 600px;
height: 300px;
border: 2px solid yellowgreen;
border-radius: 10px;
box-shadow: 2px 0px 5px #666;
margin: 10px 0 0 10px;
cursor: pointer;
}
.wrapper .btn {
width: 610px;
height: 35px;
margin: 10px 0 0px 10px;
position: relative;
}
.wrapper .btn input {
border: none;
outline: none;
width: 100px;
height: 35px;
vertical-align: middle;
margin-right: 10px;
border-radius: 10px;
background-color: chartreuse;
}
/* input type = color時，設置拾色器的外層包括的邊框帶樣式*/
.wrapper .btn input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0px;
}
/* input type = color 設置拾色器內層邊框樣式*/
.wrapper .btn input[type="color"]::-webkit-color-swatch {
border: 3px solid chartreuse;
border-radius: 10px;
}
.wrapper .btn input[type="range"] {
padding: 0 5px;
/* 消除默認樣式 */
-webkit-appearance: none;
background-color: chartreuse;
}
/* 設置 活動軌道的樣式*/
.wrapper .btn input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin-top: -4px;
}
/* 設置滑動小圓點的樣式 */
.wrapper .btn input[type="range"]::-webkit-slider-runnable-track {
width: 90px;
height: 2px;
background-color: #666;
}
js代碼如下：

var $board = $(".board")[0]; //jquery對象與dom對象轉換
var ctx = $board.getContext("2d"); //創建畫布對象
var bool = false;
var left = $(".board").offset().left; //獲取畫布的left值
var top = $(".board").offset().top; //獲取畫布的top值
var canvasW = $(".board").width(); //獲取畫布的寬度
var canvasH = $(".board").height(); //獲取畫布的高度
var img = []; //用於存放畫布圖片截圖的數組


window.onload = function() {
// draw();
ctx.lineCap = "round"; //設置線條的結束端點樣式
ctx.lineJion = "round"; //設置兩條線相交時，所創建的拐角類型
$(".board").mousedown(function(e) {
bool = true;
ctx.beginPath(); //起始/重置一條路徑
ctx.moveTo(e.clientX - left, e.clientY - top); //把路徑移動到畫布中的指定點，不創建線條
var pic = ctx.getImageData(0, 0, canvasW, canvasH); //獲取當前畫布的圖像
img.push(pic); //將當前圖像存入數組
// ctx.moveTo(e.clientX, e.clientY);
})
$(".board").mousemove(function(e) {
console.log(bool);
if (bool) {
// ctx.lineTo(e.clientX, e.clientY);
ctx.lineTo(e.clientX - 10, e.clientY - 10); //添加一個新點，在畫布中創建從該點到最后指定點的線條
ctx.stroke();
}
});
$(".board").mouseout(function(e) {
ctx.closePath(); //當鼠標移出畫布區域時,創建從當前點回到起始點的路徑
bool = false;
})
$(".board").mouseup(function(e) {

ctx.closePath(); //當鼠標抬起時,創建從當前點回到起始點的路徑
bool = false;
})
$(".clear").click(function() {
ctx.clearRect(0, 0, canvasW, canvasH); //創建一個等大畫布覆蓋
});
$(".reset").click(function() {
if (img.length > -1) {
ctx.putImageData(img.pop(), 0, 0); //刪除圖像數組最后一位
}
})
$(".eraser").click(function() {
ctx.strokeStyle = "#fff";
});
$(".color").change(function() {
ctx.strokeStyle = this.value; //改變顏色
});
$(".range").change(function() {
ctx.lineWidth = this.value; //改變線條粗細
})
}
結果如下：

————————————————
版權聲明：本文為CSDN博主「SiaEyre」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_41847321/article/details/90217415