javascript&canvas自定义画板

最新推荐文章于 2023-02-22 11:26:11 发布

线程撕裂者+

最新推荐文章于 2023-02-22 11:26:11 发布

阅读量385

点赞数 1

分类专栏： javascript 文章标签： javascript js canvas

本文链接：https://blog.csdn.net/weixin_46540009/article/details/115423959

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

用javascript实现一个自定义画板

实现效果
在这里插入图片描述
代码实现

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box {
				width: 600px;
				height: 500px;
				margin: 100px auto;
				background-color: orange;
			}
			
			#box nav {
				width: 100%;
				height: 100px;
			}
			
			#box nav div {
				height: 50px;
				line-height: 50px;
			}
			/*类选择器*/
			
			.changeColor {
				padding-left: 15px;
			}
			
			.changeColor input {
				width: 30px;
				height: 30px;
				margin: 10px 15px;
			}
			/*clear第一个(清空画布) css3属性first-of-type：指定父元素的首个 input 元素的背景色：*/
			
			.clean input:first-of-type {
				width: 100px;
				height: 30px;
				background-color: white;
				margin-left: 15px;
			}
			/*最后一个，橡皮擦*/
			
			.clean input:last-of-type {
				width: 30px;
				height: 30px;
				background-color: white;
			}
			
			canvas {
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<nav>
				<div class="changeColor">
					<!--表单控件，按钮标签-->
					<input type="button" style="background-color: pink;" />
					<input type="button" style="background-color: red;" />
					<input type="button" style="background-color: green;" />
					<input type="button" style="background-color: blue;" />
					<input type="button" style="background-color: saddlebrown;" />
				</div>
				<div class="clean">
					<input type="button" value="清空画布" onclick="clearCanvas()" /> &nbsp;橡皮擦&nbsp; <input class="eraser" type="button" />
				</div>
			</nav>
			<canvas width="600px" height="400px"></canvas>

		</div>
	</body>

js效果实现


	<script>
		//通过id找到画布,并且在画布上创建绘图环境
		var cvs = document.querySelector("canvas");
		var ctx = cvs.getContext("2d");
		//获取像皮擦标签元素
		var eraser = document.querySelector(".eraser");
		cvs.addEventListener("mousedown", function(e) {
			//获取到当前的鼠标位置
			//			console.log(event);
			//			console.log(event.clientX);
			//			console.log(event.clientY);
			//			console.log(cvs.offsetLeft);
			//			console.log(cvs.offsetTop);
			//计算当前位置在画布上的坐标
			var x = e.clientX - this.offsetLeft;
			var y = e.clientY - this.offsetTop;
			//console.log(x,y);
			//计算它当前坐标的前一位
			cvs.oldPoint = {
				x: x - 1,
				y: y - 1,
			}
			drawLine(x, y);
			cvs.addEventListener("mousemove", move);
			cvs.addEventListener("mouseup", up);
		});
		//鼠标移动触发的方法
		function move(e) {
			var x = e.clientX - this.offsetLeft;
			var y = e.clientY - this.offsetTop;
			drawLine(x, y);

			cvs.oldPoint = {
				x: x,
				y: y,
			}
		}
		//鼠标离开的时候取消它的监听事件
		function up(e) {
			//移除监听
			this.removeEventListener("mousemove", move);
			this.removeEventListener("mouseup", up);
		}

		//绘制线
		function drawLine(x, y) {
			ctx.beginPath();
			// 表明的是触发橡皮擦这个按钮
			if(ctx.strokeStyle == "#ffff00") {
				ctx.lineWidth = 40;
			} else {
				ctx.lineWidth = 5;
			}

			//当两条线条交汇时，创建圆形边角
			ctx.lineJoin = "round";
			//绘制圆形的结束线帽
			ctx.lineCap = "round";
			//起始坐标
			ctx.moveTo(cvs.oldPoint.x, cvs.oldPoint.y);
			ctx.lineTo(x, y);
			ctx.closePath();
			ctx.stroke();
		}
		//清空画布
		function clearCanvas() {
			ctx.clearRect(0, 0, cvs.width, cvs.height);
		}
		//橡皮擦功能实现
		eraser.onclick = function(e) {
				//相当于再画一遍，画成当前的背景色   getComputedStyle(cvs)，获取canvas里面所有的颜色
				ctx.strokeStyle = getComputedStyle(cvs).backgroundColor;
				//打印一下背景颜色的值
				console.log(ctx.strokeStyle);
			}
			//换颜色，获取对象
		var colorBtn = document.querySelectorAll(".changeColor input");
		//将对象转换成数组 这句话相当于Array.slice.call(arguments)，
		//目的是将arguments对象的数组提出来转化为数组，arguments本身并不是数组而是对象
		var colorBtnArr = [].slice.call(colorBtn);
		//打印颜色数组有几个值
		console.log(colorBtnArr);
		//colorBtnArr这个进行遍历
		colorBtnArr.forEach(function(item) {
			item.onclick = function() {
				//改变颜色 ，传入的this，表示我们点击的按钮
				changeColor(this);
			}
		});
		//改变按钮颜色，封装成一个方法
		function changeColor(btn) {
			ctx.strokeStyle = getComputedStyle(btn).backgroundColor;
		}
	</script>

</html>

测试效果
在这里插入图片描述

线程撕裂者+

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript&canvas自定义画板

主体部分<head> <meta charset="UTF-8"> <title></title> <style> #box { width: 600px; height: 500px; margin: 100px auto; background-color: orange; } #box nav { width: 100%; height: 100px; } #bo
复制链接

扫一扫