JS中canvas实现一个简单画板

最新推荐文章于 2024-05-10 09:50:54 发布

hohocj

最新推荐文章于 2024-05-10 09:50:54 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript 小练习文章标签： JS中canvas实现画板 canvas练习 canvas

本文链接：https://blog.csdn.net/hohocj/article/details/102764108

版权

JavaScript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

小练习

10 篇文章 0 订阅

订阅专栏

效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.rg{
				float: left;
				width: 200px;
				height: 100px;
				text-align: center;
				border: 1px black solid;
				margin-left:-1px ;
			}
			#cas{
				width: 400px;
				height: 400px;
				border: #000000 1px solid;
			}
			img{
				border: 1px white solid;
				width: 48px;
				height: 48px;
			}
			#save{
				width: 400px;
				text-align: center;
			}
			p{
				margin: 5px 0 5px 0;
			}
		</style>
	</head>
	<body>
		<div id="seclect">
			<div class="rg" id="secc">
				<p>选择颜色</p>
				<input type="color" name="" id="cl" value="" />
			</div>
			<div class="rg" id="secw">
				<p>选择大小</p>
				<img src="img/pen_thin.gif" alt="thin"  onclick="secwidth(1,this)" >
				<img src="img/pen_medium.gif" alt="medium" onclick="secwidth(5,this)" >
				<img src="img/pen_thick.gif" alt="thick" onclick="secwidth(10,this)" >
			</div>
		</div>
		<div id="cas">
			<canvas id="cs" width="400" height="300"></canvas>
		</div>
		<div id="save">
			<input type="button" name="" id="savecanvas" value="保存图画" />
			<input type="button" name="" id="clearcanvas" value="清除图画" />
		</div>
		
		<script type="text/javascript">
			    // var  color=document.getElementById("cl").value;//获取颜色
				
				var canvas=document.getElementById("cs");//获取画布
				var context=canvas.getContext("2d");
				var  img=document.querySelectorAll("img");//获取图片数组
				for(var i=0;i<img.length;i++){
					img[i].onmouseover=appear;//鼠标经过img事件
					img[i].onmouseout=leave;
				}
				
				function appear(){
					for (var i = 0; i < img.length; i++) {
						img[i].style.border="1px solid white";
					}
					this.style.border="1px solid black";
				}
				var imgchoose;
				function secwidth(width,ele){
					ele.style.border="1px solid black";
					ele.style.backgtoundColor="rgb(251, 251, 251)";
					context.lineWidth=width;//将宽度传值给画布
					imgchoose=ele;
				}
				function  leave(){
					for (var i = 0; i < img.length; i++) {
						img[i].style.border="1px solid white";
					}
					imgchoose.style.border="1px solid black";
				}
				var isDraw=false;//开始画画
				canvas.onmousedown=startDraw;//鼠标按下事件,开始画画
				canvas.onmouseout=stopDraw;//鼠标移出事件,结束画画
				canvas.onmousemove=draw;//鼠标移动事件,画出图形
				canvas.onmouseup=stopDraw;//鼠标抬起事件,结束画画
			
			    function startDraw(e){
				isDraw=true;
				context.beginPath();//开始一个新的路径
				context.strokeStyle=document.getElementById("cl").value;
				context.moveTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
			    }
			    function draw(e){
				if(isDraw){
					var x=e.pageX-canvas.offsetLeft;
					var y=e.pageY-canvas.offsetTop;
					context.lineTo(x,y);
					
					context.stroke();
				    }
			    }
			    function stopDraw(){
				  isDraw=false;
			    }
			
			    //保存功能暂时不可以
			    function savecs(){
				
				
			    }
			    document.getElementById("clearcanvas").onclick=clearcs;
			    function clearcs(){
				   context.clearRect(0,0,canvas.width,canvas.height);
			    }
		</script>
	</body>
	
</html>

坚持每周更新，向全栈大佬进发

这是我的公众号，喜欢的朋友可以关注一下，每周更新，篇篇干货

hohocj

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JS中canvas实现一个简单画板

效果图 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ...
复制链接

扫一扫