JSCanvas画板

yzhSWJ

已于 2022-02-21 08:05:59 修改

阅读量316

点赞数

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

于 2022-01-16 21:44:12 首次发布

本文链接：https://blog.csdn.net/yuzheh521/article/details/122529502

版权

js 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

Fabric.js 库

下载图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			width: 100vw;
			height: 100vh;

		}

		.caidan {
			width: 100vw;
			height: 6.25rem;
			display: flex;
			border: 0.1875rem solid #0000FF;

		}

		.btn {
			width: 9.375rem;
			height: 3.75rem;
			background-color: aliceblue;
			border: 1px solid #0000FF;
		}

		.btn1 {
			width: 9.375rem;
			height: 3.75rem;
			background-color: aliceblue;
			border: 1px solid #0000FF;
		}
		.btn2 {
			width: 9.375rem;
			height: 3.75rem;
			background-color: aliceblue;
			border: 1px solid #0000FF;
		}

		#convas1 {
			flex: 1;
			width: 100vw;

		}

		.btn.active {
			box-shadow: 0 0 20px aqua;
		}

		.btn1.active {
			box-shadow: 0 0 20px aqua;
		}
		.btn2.active {
			box-shadow: 0 0 20px aqua;
		}
	</style>
	<body>
		<!-- canvas 三要素
		画笔功能:能够拖动鼠标在页面内绘图
		
		 -->
		<div class="caidan">
			<div class="btn" id="hb">画笔</div>
			<div class="btn" id="rect">矩形</div>
			<div class="btn">圆形</div>
			<div class="btn2 download">下载图片</div>
			<div class="btn1 xi active">细</div>
			<div class="btn1 line noraml">中</div>
			<div class="btn1 line cu">粗</div>
			<div class="btn1 ">画笔颜色</div>

		</div>
		<canvas id="convas1"></canvas>
	</body>
	<script type="text/javascript">
		//找到所有按钮
		var btnAll = document.querySelectorAll(".btn")

		//获取canvas
		var can = document.querySelector("#convas1")
		//画笔
		var ctx = can.getContext("2d");
		//设置canvas宽高
		can.setAttribute("width", can.offsetWidth)
		can.setAttribute("height", can.offsetHeight)

		var huaban = {
			type: "none",
			isDraw: false,
			beginX: 0,
			beginY: 0,
			imageData: null,
			lineWidth: 6, //设置画笔初始粗细//修改方法没有写,自己写吧
			//圆,线
			huabiFn: function(e) {
				
				//计算鼠标在画布的距离
				var disX = e.clientX - can.offsetLeft
				var disY = e.clientY - can.offsetTop
				//ctx.beginPath()
				//x,y 圆心,3 半径,0 角度从0 开始画,Math.PI 180度 是半圆,乘以2 360 度 是整圆
				//ctx.arc(disX, disY, 3, 0, 2 * Math.PI)
				//ctx.fill()
				//画线
				ctx.lineTo(disX, disY)
				ctx.lineWidth = huaban.lineWidth //设置画笔宽度
				ctx.lineCap = 'round' //角度圆滑
				ctx.lineJoin = 'round' //连接处设置圆滑

				ctx.stroke()
				//画笔在抬起的时候关闭路径
				//ctx.closePath()
			},
			//矩形
			rectFn: function(e) {
				//计算鼠标在画布的距离
				let x = e.clientX - can.offsetLeft
				let y = e.clientY - can.offsetTop
				
				//起始点
				ctx.beginPath()
				//先清除所有矩形,从新绘画
				ctx.clearRect(0, 0, can.offsetWidth, can.offsetHeight)
				ctx.rect(huaban.beginX, huaban.beginY, x - huaban.beginX, y - huaban.beginY)
				if (huaban.imageData ?? '' != '') {
					//添加到对象中
					ctx.putImageData(huaban.imageData, 0, 0, 0, 0, can.offsetWidth, can.offsetHeight)
				}

				//描边颜色
				ctx.strokeStyle = "#0000FF"
				//描边渲染路径
				ctx.stroke()

				ctx.closePath()
			}

		}
		//监听画笔
		var hb = document.querySelector('#hb')
		//点击以后切换样式
		hb.onclick = function() {
			//移除所有样式
			btnAll.forEach(function(item, i) {
				item.classList.remove('active')
			})
			hb.classList.add("active")
			huaban.type = 'huabi'
		}

		//监听矩形
		var rect = document.querySelector('#rect')
		//点击以后切换样式
		rect.onclick = function() {
			//移除所有样式
			btnAll.forEach(function(item, i) {
				item.classList.remove('active')
			})
			rect.classList.add("active")
			huaban.type = 'rect'
		}
		//监听下载
		var downloadBtn= document.querySelector('.download')
		downloadBtn.onclick=function(){
			//获取图片地址
			var url =can.toDataURL()
			//base64
			console.log(url)
	
		}
		//监听鼠标按下事件
		can.onmousedown = function(e) {
			//按下可以画
			huaban.isDraw = true
			if (huaban.type == "rect") {
				var x = e.clientX - can.offsetLeft
				var y = e.clientY - can.offsetTop
				huaban.beginX = x
				huaban.beginY = y

			}
			if (huaban.type == "huabi") {
				var x = e.clientX - can.offsetLeft
				var y = e.clientY - can.offsetTop
				huaban.beginX = x
				huaban.beginY = y
				ctx.beginPath()
				ctx.moveTo(x, y)


			}
		}

		//监听鼠标抬起事件
		can.onmouseup = function() {
			huaban.imageData = ctx.getImageData(0, 0, can.offsetWidth, can.offsetHeight)
			//抬起不可画
			huaban.isDraw = false
			if (huaban.type = 'huabi') {
				ctx.closePath()
			}

		}
		//鼠标移动事件
		can.onmousemove = function(e) {
			var strFn = huaban.type + 'Fn'
			if (huaban.isDraw) {
				huaban[strFn](e)
			}
		}
	</script>
</html>

yzhSWJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JSCanvas画板

下载图片<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> * { margin: 0; padding: 0; box-sizing: border-box; } body { ...
复制链接

扫一扫