h5逐步实现 ＜＜canvas系统＞＞

2020-10-28 10:26:57 浏览数 (1)
代码语言：javascript复制
<!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");
			console.log("支持666");
		}
		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>
代码语言：javascript复制
第一：写一个canvas对象,用canvas来做.

```javascript
<canvas id="draw" ></canvas>

注意一下:它默认宽300 高150。

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	
</head>
<body>
	<canvas id="canvas"></canvas>
	<script type="text/javascript">
		console.log(canvas.offsetWidth,canvas.offsetHeight);
	</script>
</body>
</html>

第二·：判断所用的浏览器是否支持canvas.

代码语言：javascript复制
const canvas=document.querySelector("#draw");
		if(canvas.getContext)
		{
			var ctx=canvas.getContext("2d");
			console.log("支持666");
		}
		else
		{
			console.log("不支持");
		}

第三：让canvas绘图可以画整个body.并且要设置线条的宽度 线条结束时候的形状 两天线条相交时的形状. 线条的颜色.

代码语言：javascript复制
canvas.width=window.innerWidth;
		canvas.height=window.innerHeight;
		ctx.lineWidth=90;
		ctx.lineCap="round";
		ctx.lineJoin="round";
		ctx.strokeStyle="red";

第四；当点击body某一处的时候就开始作画.然后是获取按下去时候的xy坐标点.

代码语言：javascript复制
canvas.addEventListener('mousedown',e=>
		{
			isDrawing=true;
			[lastX,lastY]=[e.offsetX,e.offsetY];
		});

第五：移动的时候触发draw函数,

代码语言：javascript复制
canvas.addEventListener("mousemove",draw);

第六:记录移动完毕后的xy坐标.

代码语言：javascript复制
x=e.offsetX;
y=e.offsetY;

第七;多姿多彩的效果:

代码语言：javascript复制
ctx.strokeStyle=`hsl(${hue},90%,50%)`;
			if(hue>360)hue=0;
			hue  ;

第八：控制笔触的宽.(口诀；太大了就小,太小了就大)

代码语言：javascript复制
if(ctx.lineWidth>120||ctx.lineWidth<10)
			{
				direction=!direction;
			}
			if(direction)
			{
				ctx.lineWidth  ;
			}
			else
			{
				ctx.lineWidth--;
			}

第九:开始绘制

代码语言：javascript复制
ctx.beginPath();
			ctx.moveTo(lastX,lastY);
			ctx.lineTo(x,y);
			ctx.stroke();
			[lastX,lastY]=[x,y]//核心

注意一下·；lastx与lasty是down的时候的xy坐标,x，y是move完毕后的坐标. 有一个问题

第十:怎么办？[lastX,lastY]=[x,y] 就行了，代表按下了一直移动能够完美续接. 不然的话，会按下然后移动会像上面的图一样。 这里解决了上面的图片的问题.

canvas

0 人点赞