JavaScript事件鼠标事件

最新推荐文章于 2024-03-16 11:36:04 发布

雪落无痕颂千殇

最新推荐文章于 2024-03-16 11:36:04 发布

阅读量166

点赞数

文章标签： javascript canvas

本文链接：https://blog.csdn.net/qq_38269362/article/details/107280495

版权

鼠标事件练习

鼠标事件之画板练习

鼠标事件之画板练习

canvas介绍： canvas是HTML5中的新元素,你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。
// 线的宽度 context.lineWidth=10;
// 颜色 context.strokeStyle="#0000FF";
// 开始 context.moveTo(30,20);
// 结束 context.lineTo(20,30); context.lineTo(200,300);
// 划线 context.stroke();

<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标事件-画板</title>
		<style>
			#col1{
				background-color: black;
				width: 10%;
				color: white;
				display: inline-block;
			}
			#col2{
				background-color: red;
				width: 10%;
				color: white;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<canvas id="can" width="1233" height="700" style="border: 1px solid     #0000FF; display: flex; "></canvas>
	<div style="width: 1233px; height: 233px; border: 1px #000000;">
		<div id="col1">q</div>
		<div id="col2">w</div>
	</div>
	</body>
	<script>
		var canvas=document.getElementById("can");
		var context=canvas.getContext("2d");
	
		// 颜色
		context.strokeStyle="#0000FF";
		var c=document.getElementById("col1");
		var cc=c.style.backgroundColor;
		console.log(1);
		console.log(cc);
		c.onmousedown = function (){
			context.strokeStyle="#000000";
		}
		var c1=document.getElementById("col2");
		c1.onmousedown = function (){
			context.strokeStyle="red";
		}

	
		context.stroke();
		var fa=false;
		// 鼠标按下
		canvas.onmousedown = function(e){
			// 开启新路径
			context.beginPath();
			var x=e.offsetX;
			var y=e.offsetY;
			context.moveTo(x,y);
			fa=true;
		}
		// 鼠标抬起
		canvas.onmouseup = function(){
			fa=false;
		}
		
		// 鼠标移动
		canvas.onmousemove = function (e){
			if(fa){
				var x=e.offsetX;
				var y=e.offsetY;
				context.lineTo(x,y);
				context.stroke(); 
			}
		}
		
		//鼠标移除
		canvas.onmouseout = function (){
			fa=false;
		}
	</script>
</html>