canvas簡易畫板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>canvas 畫圖板</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
}
.options {
display: flex;
align-items: center;
margin-top: 20px;
}
.options input {
/* 清除input自帶的輪廓 */
outline: 0;
margin-left: 20px;
}
.options button {
/* 簡單修飾一下按鈕 */
/* 同樣清除輪廓 */
outline: 0;
/* 把邊框也去掉 */
border: 0;
padding: 10px 20px;
/* 加個圓角 */
border-radius: 3px;
color: #fff;
background-color: #0d53ff;
/* 鼠標移入變小手 */
cursor: pointer;
}
/* 給畫布一個邊框 */
canvas {
margin-top: 20px;
border: 1px solid #000;
}
</style>
<!-- <link rel="stylesheet" href="css/index.css" />
<script src="js/index.js"></script> -->
</head>
<body>
<!-- 不寫樣式 只為實現(xiàn)最后的畫圖效果 -->
<div class="container">
<div class="options">
<label>畫筆顏色</label>
<!-- value值可以設(shè)置默認的顏色 -->
<input type="color" value="#7788ff" id="color" />
</div>
<div class="options">
<label>畫筆粗細</label>
<!-- value同樣設(shè)置默認的值 -->
<!-- min為最小取值 -->
<!-- max為最大取值 -->
<input type="range" value="5" min="1" max="50" id="range" />
</div>
<div class="options">
<button id="clear">清空畫布</button>
</div>
<canvas width="1000" height="500"></canvas>
</div>
<script type="text/javascript">
window.addEventListener("load", () => {
// 獲取顏色元素
const color = document.querySelector("#color");
// 獲取range元素
const range = document.querySelector("#range");
// 設(shè)置初始的畫筆顏色和粗細 畫圖時用的
let colorValue = color.value,
rangeValue = range.value;
// 給顏色選擇器加onchange事件 以此來更新顏色
color.addEventListener("change", () => {
// 變化之后就會改變value值
colorValue = color.value;
});
// 同理來改變畫筆粗細
range.addEventListener("change", () => {
rangeValue = range.value;
});
// ok現(xiàn)在開始畫圖了
// 先獲取畫布
const cvs = document.querySelector("canvas");
// 再返回一個2d的繪圖環(huán)境
const ctx = cvs.getContext("2d");
// 給畫布添加鼠標按下事件
let flag = false;
cvs.addEventListener("mousedown", (e) => {
// 按下之后讓flag變成true
flag = true;
// 這里我們要獲取鼠標的坐標來確定畫布里面的初始位置
// 先獲取畫布距離瀏覽器可視區(qū)的頂部和左部的大小
// getBoundingClientRect這個方法內(nèi)有六個值 分別是 left top right bottom 和 width height 代表當(dāng)前元素的寬度和高度
const top = cvs.getBoundingClientRect().top;
const left = cvs.getBoundingClientRect().left;
// 然后求出鼠標在畫布內(nèi)容的位置
// 計算方式依然是 鼠標距離整個瀏覽器可視區(qū)域的距離減去畫布距離瀏覽器的距離
const mouseX = e.pageX - left;
const mouseY = e.pageY - top;
// 這樣就獲取到了
// 可以開始繪圖了
// 先設(shè)置好繪圖的畫筆顏色和粗細
ctx.strokeStyle = colorValue;
ctx.lineWidth = rangeValue;
// 這里再設(shè)置一個屬性
// 繪制的圖像是圓角的
ctx.lineCap = "round";
// 開啟一個路徑
ctx.beginPath();
// 然后確定開始繪圖的起點位置
ctx.moveTo(mouseX, mouseY);
});
// 現(xiàn)在在加鼠標移動事件就可以繪圖了
cvs.addEventListener("mousemove", (e) => {
// 同樣的方式獲取鼠標位置 復(fù)制一下
const top = cvs.getBoundingClientRect().top;
const left = cvs.getBoundingClientRect().left;
const mouseX = e.pageX - left;
const mouseY = e.pageY - top;
// OK 這樣就可以保證按下在開始畫了
if (flag) {
// 然后就開始連接線條了
// 這個用來確定要去的位置
ctx.lineTo(mouseX, mouseY);
// 封閉連接
ctx.stroke();
}
});
// ok 現(xiàn)在我們需要鼠標按下才繪圖
// 用最笨的方法 立一個flag 哈哈
// 現(xiàn)在鼠標彈起了還繪圖 加一個鼠標彈起事件
cvs.addEventListener("mouseup", () => {
// flag為fasle即可
flag = false;
});
// 現(xiàn)在實現(xiàn)清空畫布
// 獲取按鈕
const clear = document.querySelector("#clear");
clear.addEventListener("click", () => {
// clearRect方法可以清空一定區(qū)域內(nèi)的內(nèi)容 填寫的值為x坐標 y坐標 清除的寬度 和 高度 我們?nèi)恳宄?所以直接從左上角開始 寬高為畫布的寬高了 再來試試
ctx.clearRect(0, 0, 1000, 500);
// OK了
});
});
</script>
</body>
</html>
