js+css实现简单的canvas画板效果代码-html代码-BFW代码库

js+css实现简单的canvas画板效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现简单的canvas画板效果代码，可设置画笔颜色和笔触大小。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!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" />
<style>
    * {
	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>
	</head>
	<body>
		<!-- 本期视频不写样式 只为实现最后的画图效果 -->
		<div class="container">
			<div class="options">
				<label>画笔颜色</label>
				<!-- value值可以设置默认的颜色 -->
				<input type="color" value="#7788ff" id="color" />
			</div>
			<div class="options">
				<label>画笔粗细</label>
				<!-- value同样设置默认的值 -->
				<!-- 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>
		    window.addEventListener("load", () => {
	// 获取颜色元素
	const color = document.querySelector("#color");
	// 获取range元素
	const range = document.querySelector("#range");
	// 设置初始的画笔颜色和粗细 画图时用的
	let colorValue = color.value,
		rangeValue = range.value;
	// 给颜色选择器加onchange事件 以此来更新颜色
	color.addEventListener("change", () => {
		// 变化之后就会改变value值
		colorValue = color.value;
	});
	// 同理来改变画笔粗细
	range.addEventListener("change", () => {
		rangeValue = range.value;
	});

	// ok现在开始画图了
	// 先获取画布
	const cvs = document.querySelector("canvas");
	// 再返回一个2d的绘图环境
	const ctx = cvs.getContext("2d");
	// 给画布添加鼠标按下事件
	let flag = false;
	cvs.addEventListener("mousedown", (e) => {
		// 按下之后让flag变成true
		flag = true;
		// 这里我们要获取鼠标的坐标来确定画布里面的初始位置
		// 先获取画布距离浏览器可视区的顶部和左部的大小
		// getB.........完整代码请登录后点击上方下载按钮下载查看