canvas系统

<!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 type="text/css">
		*{
    
    padding: 0px;margin: 0px;}
		body
		{
    
    
			overflow: hidden;
		}
	</style>
</head>
<body>
	<canvas id="draw" ></canvas>
	<script type="text/javascript">
		//获取canvas.
		const canvas=document.querySelector("#draw");
		if(canvas.getContext)
		{
    
    
			var ctx=canvas.getContext("2d");
		}
		else
		{
    
    
			console.log("不支持");
		}
		/*支持就执行余下的语句能够用起来,不支持的话,页面上会什么效果都没有。*/
		canvas.width=window.innerWidth;
		canvas.height=window.innerHeight;
		ctx.lineWidth=90;//线条的颜色.
		ctx.lineCap="round";/*线条结束时的形状*/
		ctx.lineJoin="round";/*当两条线条相交时.*/
		ctx.strokeStyle="red";
		let isDrawing=false;//还没开始画
		let x=0;let y=0;
		let lastX = 0;
    	let lastY = 0;
    	let hue = 0;
    	let direction = true;
		function draw(e)
		{
    
    
			if(!isDrawing)
			{
    
    
				return;
			}

			x=e.offsetX;//获取移动后停下的坐标点.
			y=e.offsetY;//获取移动后停下的坐标点.
			//彩虹效
			ctx.strokeStyle=`hsl(${
      
      hue},90%,50%)`;
			if(hue>360)hue=0;
			hue++;
			//		控制笔触大小
			if(ctx.lineWidth>120||ctx.lineWidth<10)
			{
    
    
				direction=!direction;
			}
			if(direction)
			{
    
    
				ctx.lineWidth++;
			}
			else
			{
    
    
				ctx.lineWidth--;
			}
			/*这段思路时:开始direction = true,++到大于120就direction=!direction;,为false,就else--到小于10时就	direction=!direction;,true,就++至此循环.*/
			ctx.beginPath();
			ctx.moveTo(lastX,lastY);//开始画了
			ctx.lineTo(x,y);
			ctx.stroke();
			[lastX,lastY]=[x,y]
		}
		canvas.addEventListener('mousedown',e=>
		{
    
    
			isDrawing=true;//开始画.
			[lastX,lastY]=[e.offsetX,e.offsetY];//获取按下的开始xy坐标点
		});
		canvas.addEventListener("mousemove",draw);
		canvas.addEventListener('mouseup',()=>isDrawing=false);//这两个都false
		canvas.addEventListener('mouseout',()=>isDrawing=false);
	</script>
</body>
</html>
猜你喜欢
