h5逐步实现＜＜canvas系统＞＞(html逻辑 css逻辑 js逻辑)

最新推荐文章于 2021-07-25 19:23:36 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2021-07-25 19:23:36 发布

阅读量922

点赞数 6

分类专栏： JS 60(提升你的能力)

本文链接：https://blog.csdn.net/qq_37805832/article/details/109020236

版权

JS 60(提升你的能力) 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

在这里插入图片描述

<!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>


第一：写一个canvas对象,用canvas来做.

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

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

<!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.

const canvas=document.querySelector("#draw");
		if(canvas.getContext)
		{
			var ctx=canvas.getContext("2d");
			console.log("支持666");
		}
		else
		{
			console.log("不支持");
		}

在这里插入图片描述

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

canvas.width=window.innerWidth;
		canvas.height=window.innerHeight;
		ctx.lineWidth=90;
		ctx.lineCap="round";
		ctx.lineJoin="round";
		ctx.strokeStyle="red";

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

canvas.addEventListener('mousedown',e=>
		{
			isDrawing=true;
			[lastX,lastY]=[e.offsetX,e.offsetY];
		});

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

canvas.addEventListener("mousemove",draw);

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

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--;
			}

第九:开始绘制

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]
就行了，代表按下了一直移动能够完美续接.
不然的话，会按下然后移动会像上面的图一样。
这里解决了上面的图片的问题.

贵哥的编程之路(热爱分享)

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
8
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

h5逐步实现 ＜＜canvas系统＞＞(html逻辑 css逻辑 js逻辑)

h5逐步实现＜＜canvas系统＞＞(html逻辑 css逻辑 js逻辑)