当前位置：网站首页>Canvas drawing (mouse click to draw and lift to end)

Canvas drawing (mouse click to draw and lift to end)

2022-07-24 02:06:00 【（-^_^-）】

 

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
			/* The second step ： Set canvas style  */
		#myCanvas{
			border: 5px solid black;
			background-color: pink;

		}
	</style>
</head>
<body>
	<!--  First step ： Define canvas   Width height without px-->
	<canvas id="myCanvas" width="860" height="480"> Prompt information ： Browsers do not support canvases </canvas>
	<!--  The second step ： Set canvas style  css-->
	<!--  The third step ：JS Preparing the drawing context ----- paint brush  -->
	<!--  Step four ：JS mapping  -->
	<script src="js/1.js">
	</script>
</body>
</html>

//  Set canvas variables 、 Brush variables 
var canvas,pen;

//  The third step :JS Preparing the drawing context ----- paint brush 
var canvas=document.getElementById("myCanvas");//2d Represents the current drawing 2 Dimensional plane drawing   paint brush 
var pen = canvas.getContext("2d"); //getContext Get context 
pen.lineWidth=5;// Pen thickness 
pen.strokeStyle ="black";// The color of the pen 

// Consider what actions the drawing is completed in 
// Mouse operation has three states   The mouse click （ Ready to start drawing ）  The mouse is raised （ Finish drawing ）  Press and move the mouse （ Start drawing ）
var mousePress=false; // Used to judge the state of the mouse   Default   Didn't press 
var last = null;// The point at which the current mouse ends drawing 

// Definition of drawing function 
function pos(event)// A function that determines the coordinates of a point 
{
	var x1,y1; // Represents the coordinates of the point triggered by the current point 
	x1=event.clientX;
	y1=event.clientY;
	return{
		x:x1,
		y:y1
	}
}
// Ready to start drawing 
function start(event)
{
	mousePress=true;// It means mouse down 
}
// Start drawing 
function draw(event)
{
	if(!mousePress) return;// Indicates that the mouse is not pressed 
	var xy=pos(event);// Get the point coordinates 
	if(last != null){ // Indicates that the end point is not empty 
		pen.beginPath();// Prepare the brush 
		pen.moveTo(last.x,last.y);// The starting point of the brush   Last drawing end point 
		pen.lineTo(xy.x,xy.y);//lineTo Method   Finish line   The coordinates of the current point 
		pen.stroke();// Use this method with real drawings 
	}
	last = xy;// Give the current point to last  It means the end of this time  
}
// Finish drawing 
function finish(event)
{
	mousePress=false;// It means mouse down 
	last=null ;// Set the end point to null
}
canvas.onmousedown=start;
canvas.onmousemove=draw;
canvas.onmouseup=finish;

原网站

版权声明
本文为[（-^_^-）]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/205/202207240203535382.html

边栏推荐

猜你喜欢

随机推荐