javascript学习-画板

最新推荐文章于 2023-02-22 11:26:11 发布
最新推荐文章于 2023-02-22 11:26:11 发布
阅读量360 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43368682/article/details/107805545
版权

制作一个画板。

index.html（其他省略，可在GitHub获取完整代码）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style2.css"/>
		<link rel="stylesheet" type="text/css" href="css/alert.css"/>
		<script src="js/alert.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div class="caidan">
			<div class="btn" id="huabi" style="background-image: url(img/huabi.png);"></div>
			<div class="btn" id="rect" style="background-image: url(img/rect.png);"></div>
			<div class="btn" id="circle" style="background-image: url(img/circle.png);"></div>
			<div class="btn download">下载图片</div>
			<div class="btn download2" style="display: none;">
				<a  href="" download="download">下载</a>
			</div>
			<div class="btn" id="cachu">橡皮擦</div>
			<div class="btn1 line xi "></div>
			<div class="btn1 line normal "></div>
			<div class="btn1 line cu "></div>
			<div class="btn"><input type="color" name="color" id="color" value="" /></div>
		</div>
		<canvas id="canvas" ></canvas>
		<script type="text/javascript">
			var allBtn=document.querySelectorAll(".btn");
			var allLineDivs=document.querySelectorAll(".line");
			var canvas=document.querySelector("#canvas");
			var ctx=canvas.getContext('2d');
			var rectBtn=document.querySelector("#rect");
			var circleBtn=document.querySelector("#circle");
			var xiBtn=document.querySelector(".xi");
			var norBtn=document.querySelector(".normal");
			var cuBtn=document.querySelector(".cu");
			var huaban={
				type:"none",
				isDraw:false,
				beginX:0,
				beginY:0,
				lineWidth:6,
				color:"black",
				imgData:null,
				huabiFn:function(e){
					var x=e.pageX-canvas.offsetLeft;
					var y=e.pageY-canvas.offsetTop;
					ctx.clearRect(0,0,canvas.offsetWidth,canvas.offsetHeight);
					if(huaban.imgData!=null){
						ctx.putImageData(huaban.imgData,0,0,0,0,canvas.offsetWidth,canvas.offsetHeight);
					}
					ctx.lineTo(x,y);
					ctx.lineWidth=huaban.lineWidth;
					ctx.strokeStyle=huaban.color;
					ctx.stroke();
					},
				rectFn:function(e){
					var x=e.pageX-canvas.offsetLeft;
					var y=e.pageY-canvas.offsetTop;
					
					ctx.clearRect(0,0,canvas.offsetWidth,canvas.offsetHeight);
					if(huaban.imgData!=null){
						ctx.putImageData(huaban.imgData,0,0,0,0,canvas.offsetWidth,canvas.offsetHeight);
					}
					ctx.beginPath();
					ctx.rect(huaban.beginX,huaban.beginY,x-huaban.beginX,y-huaban.beginY)
					ctx.lineWidth=huaban.lineWidth;
					ctx.strokeStyle=huaban.color;
					ctx.stroke();
					ctx.closePath();
				},
				circleFn:function(e){
					var x=e.pageX-canvas.offsetLeft;
					var y=e.pageY-canvas.offsetTop;
					ctx.clearRect(0,0,canvas.offsetWidth,canvas.offsetHeight);
					if(huaban.imgData!=null){
						ctx.putImageData(huaban.imgData,0,0,0,0,canvas.offsetWidth,canvas.offsetHeight);
					}
					var cx=(x+huaban.beginX)/2;
					var cy=(y+huaban.beginY)/2;
					var xr=Math.abs(x-huaban.beginX)/2
					var yr=Math.abs(y-huaban.beginY)/2
					ctx.beginPath();
					ctx.ellipse(cx,cy,xr,yr,0,0,Math.PI*2)
					ctx.lineWidth=huaban.lineWidth;
					ctx.strokeStyle=huaban.color;
					ctx.stroke();
					ctx.closePath();
				},
				cachuFn:function(e){
					var x=e.pageX-canvas.offsetLeft;
					var y=e.pageY-canvas.offsetTop;
					ctx.beginPath()
					ctx.globalCompositeOperation = "destination-out"
					ctx.arc(x,y,20,0,2*Math.PI)
					ctx.fill()
					ctx.closePath()
				}
				
			}
			canvas.setAttribute("width",canvas.offsetWidth)
			canvas.setAttribute("height",canvas.offsetHeight)
			var huabiBtn=document.querySelector("#huabi");
			huabiBtn.onclick=function(){
				allBtn.forEach(function(item,i){
					item.classList.remove("active")
				})
				huabiBtn.classList.add("active")
				huaban.type="huabi";
			}
			
			
			rectBtn.onclick=function(){
					allBtn.forEach(function(item,i){
						item.classList.remove("active")
					})
					rectBtn.classList.add("active")
					huaban.type="rect";
		    }
			circleBtn.onclick=function(){
				allBtn.forEach(function(item,i){
					item.classList.remove("active")
				})
				circleBtn.classList.add("active")
				huaban.type="circle";
			}
			xiBtn.onclick=function(){
				allLineDivs.forEach(function(item,i){
					item.classList.remove("active")
				})
				xiBtn.classList.add("active")
				huaban.lineWidth=6;
			}
			norBtn.onclick=function(){
				allLineDivs.forEach(function(item,i){
					item.classList.remove("active")
				})
				norBtn.classList.add("active")
				huaban.lineWidth=16;
			}
			cuBtn.onclick=function(){
				allLineDivs.forEach(function(item,i){
					item.classList.remove("active")
				})
				cuBtn.classList.add("active")
				huaban.lineWidth=32;
			}
			
			
			var colorInput=document.querySelector("#color");
			colorInput.onchange=function(e){
				var color=colorInput.value;
				huaban.color=color;
			}
			canvas.onmousedown=function(e){
				huaban.isDraw=true;
				if(huaban.type=="rect")
				{
					var x=e.pageX-canvas.offsetLeft;
					var y=e.pageY-canvas.offsetTop;
					huaban.beginX=x;
					huaban.beginY=y;
				}
				if(huaban.type=="huabi"){
					var x = e.pageX - canvas.offsetLeft;
					var y = e.pageY - canvas.offsetTop;
					huaban.beginX = x;
					huaban.beginY = y;
					ctx.beginPath()
					ctx.moveTo(x,y)
				}
				if(huaban.type=="circle")
				{
					var x=e.pageX-canvas.offsetLeft;
					var y=e.pageY-canvas.offsetTop;
					huaban.beginX=x;
					huaban.beginY=y;
				}
				if(huaban.type!="cachu"){
					ctx.globalCompositeOperation = "source-over"
				}
			}
			canvas.onmouseup=function(){
				huaban.isDraw=false;
				huaban.imgData = ctx.getImageData(0,0,canvas.offsetWidth,canvas.offsetHeight)
				if(huaban.type=="huabi"){
					ctx.closePath();
				}
				
			}
			canvas.onmousemove=function(e){
				
				
				if(huaban.isDraw){
					huaban[huaban.type+'Fn'](e);
					//console.log(huaban.type+'Fn');
					
				}
			}
			var downloadBtn=document.querySelector(".download");
			//使用toDataURL找到图片地址
			downloadBtn.onclick=function(e){
			  var url = canvas.toDataURL()
			  var img = new Image()
			  img.src = url;
			  var aDom = document.querySelector(".download2 a")
			  newalert({
			  	title:"下载图标",
			  	content:"<img style='width:auto;height:230px;' src='"+url+"'/>",
			  	confirmFn:function(){
			  		
			  		aDom.setAttribute("href",url);
			  		//自动触发点击事件
			  		aDom.click()
			  	},
			  })
			}
			
			var cachuBtn=document.querySelector("#cachu");
			cachuBtn.onclick=function(e){
				allBtn.forEach(function(item,i){
					item.classList.remove("active")
				})
				cachuBtn.classList.add("active")
				huaban.type="cachu";
				
			}
		</script>
	</body>
</html>

结果：
在这里插入图片描述
在这里插入图片描述
完整代码：https://github.com/yulu920/draw

加油吧qaq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现canvas在线画板
A20201130的博客
02-21 2929
一、前言 canvas是html5的一个新标签，属于h5的新特性，也是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，折线等等，它是通过javascript来操控的，即脚本绘制图形。 二、实现效果 今天这个canvas小案例主要是四个功能 1. 画线 2. 矩形 3. 圆 4. 可以改变画笔的粗细 5.清除画板 三、代码实现 1.html+css部分代码 <style> canvas{ background-colo..
javascript实现画板功能
11-20
总之，这个JavaScript实现的画板功能是一个基础的交互式绘图工具，它可以作为学习HTML5 Canvas和JavaScript交互的一个起点。通过扩展这个示例，可以添加更多的功能，如保存和加载画作、添加形状选择、图片导入等，以...
原生JS结合canvas写的一套画板,能修改画笔粗细,能修改画笔颜色,能清空画板等一系列功能
qq_52619560的博客
07-28 1241
2.用到的JS的canvas知识点之外,还用到了鼠标事件的监听.根据鼠标事件,监听点击起始位置,以及过程中鼠标移动的位置,到最后鼠标松开的位置.再根据鼠标的移动轨迹进行画线.3.源码中封装了两个函数,line()函数是画布的一系列画线方法,change()函数是监听的鼠标移动轨迹,轨迹结合画线方法,完成画板的绘画功能.在鼠标轨迹的监听事件中,鼠标松开的事件里.要将之前的鼠标事件值为空,这样鼠标松开之后,才不会妨碍后续鼠标事件的执行.//封装函数功能监听鼠标的移动轨迹。//封装函数功能画线。...
用html+js的canvas创建一个画板【建议收藏】
最新发布
小魏快起床的博客
02-22 848
在浏览器创建一个画板，可以随意涂涂画画，还可以下载自己画好的作品，简单实用。
HTML CSS JS简易画板（含知识点温习）
lbwnbdedede的博客
10-24 532
文章目录前言一、HTML部分1、代码2、温习二、CSS部分1、代码2、温习三、JavaScript部分1、代码2、温习总结 前言 笔者目前只学习到BOM的内容，因此所用代码都只限于HTML5、CSS、JS的部分 效果图： 高情商：蜡笔质感 低情商：画笔不连续（我也不清楚怎么改善，还请大佬指教） 一、HTML部分 1、代码 主要指body <body> <div id="content"> <!-- 用于选画笔颜色 --> <l
每一个用到canvas的小伙伴都应该了解的fabric.js
荣顶的博客
08-10 811
导语 我们想在画布上画个基本的简单形状的时候，使用 Canvas 不会觉得有什么繁琐。但当画布上需要任何形式的互动，绘制复杂的图形和在特定情况需要改变图片的时候,使用原生 canvas API 将会变得很困难。 而 Fabric 旨在解决这个问题。 Fabric.js 是一个强大而简单的 Javascript HTML5 画布库 Fabric 在画布元素之上提供交互式对象模型 Fabric 还具有 SVG-to-canvas（和 canvas-to-SVG）解析器 为了方便,下面我将通过 vue项目
课程设计-JAVA-画板-模拟画图工具.docx
09-30
《JAVA-画板-模拟画图工具的设计与实现》 在计算机科学领域，模拟画图工具是一种常见的应用程序，它允许用户在屏幕上绘制各种图形。本课程设计以JAVA语言为基础，结合JavaScript技术，构建一个功能完备的画板应用，...
HTML5+JavaScript画板
03-08
HTML5和JavaScript是现代网页开发中的核心技术，它们的结合为创建互动性强、用户体验...通过学习这个项目，开发者不仅可以掌握基础的Canvas绘图技巧，还能了解如何利用JavaScript处理用户交互和实现复杂的Web应用功能。
JavaScript 项目-atrament.js.zip
08-27
JavaScript 项目-atrament.js.zip 是一个专注于JavaScript的开源画板工具，它的核心特性是体积小巧，但功能强大。...对于想要学习JavaScript绘图或者构建类似应用的人来说，这是一个很好的学习资源。
Javascript-30-days
05-25
"Javascript-30-days" 是一个非常受欢迎的学习项目，由 Wes Bos 创建，旨在帮助开发者在30天内通过实践掌握JavaScript编程。这个项目涵盖了JavaScript的各个方面，从基础语法到高级特性，适合初级到中级水平的开发者...
jquery+css3实现在线编辑涂鸦画板功能
06-12
这是一个网友分享的HTML5画板功能，带有RGB调节和高斯模糊功能，效果还是蛮好的，懒人之家推荐给大家使用。同时也非常感谢luoxiaolongshuaige@qq.com 的投稿
fabricjs画板工具
02-28
fabricjs插件 可以编辑图片缩放等功能
html+js+canvas实现画板涂画功能和vue+canvas实现画板涂画功能
sumimg的博客
09-28 1775
1，html+js+canvas实现画板涂画功能 效果如下： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <style> #canvas{cursor:crosshair;} #red{background:red; width:30px;height: 27px} #blue{background:blue; width:30px;height: 27px} #yellow{ba
javascript移动设备触屏画板（附演示地址和源码）
iamlujingtao的博客
10-15 572
javascript移动设备触屏画板（附演示地址和源码）一、前言二、在线演示和GitHub源码三、示例核心代码 一、前言 上篇学习了 《javascript移动设备触屏事件及练习》后，我们初步了解了触屏事件。 这次我们这基础上打造一款有触摸功能的画板，好让我们的艺术细胞发扬广大。 触摸事件我们用到“touchstart、touchmove、touchend”， 而画板我们用到html5的“canv...
js使用canvas 绘画 画板 签名墙
来了波，兄嘚
02-11 862
方便实用上代码 <!DOCTYPE html> <html lang="en"> <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"> <ti.
使用js+canvas写了个简易画板
qq_35962740的博客
11-20 236
画板支持设置线条的粗细、颜色， 橡皮檫和清除功能。 效果如下图： 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #canvas { border: 2px solid rgba(0, 0, 0, .4); margin-left: 2px;
JS画图板Demo
如果没有_明天
08-02 1324
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js做的画板-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></scr...
用JavaScript写一个画板
qq_40765552的博客
04-15 335
1.html： 2.css中的样式 3.js： 4.最终结果
JavaScript教程--互联网时代的技术工具
因此，学习JavaScript成为了Web开发者必备的技能之一。 本教程围绕JavaScript语言的基础知识和高级应用展开，分为入门篇和精通篇。入门篇主要介绍了JavaScript的基础语法、数据类型、流程控制、函数、对象等知识点...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值