devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【html5】09-Canvas画布（1）

作者：AllinToyou | 2024-05-25 03:56:04

赞

踩

【html5】09-Canvas画布（1）

目录

引言

1 绘图工具

1.1 canvas初体验

 1.2 解决绘图重绘问题

2 绘图方法

2.1 连线方式

2.2线帽

3 渐变方案

3.1 线性渐变

 3.2 径向渐变

4 填充效果

4.1 非零环绕原则进行填充 

引言

HTML5 的 <canvas> 元素提供了一个通过 JavaScript 绘制图形的方式，使得网页上的动态和交互式图形成为可能。<canvas> 本身只是一个容器，你需要在上面使用 JavaScript 和 Canvas API 来绘制内容。

1 绘图工具

### 绘图工具
☞ 介绍canvas画布
☞ 设置画布大小： 使用属性方式设置
☞ 解决画布重绘问题
1. 设置一次描边
2. 开启新的图层

1.1 canvas初体验

落笔->连线->描边

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style type="text/css">
  7. 		canvas {
  8. 			border: 1px solid red;
  9. 		}
  10. 	</style>
  11. </head>
  12. <body>
  13. 	<canvas width="600" height="400"></canvas>
  14.  
  15. 	<script type="text/javascript">
  16. 		
  17. 		//获取画布
  18. 		var canvas=document.querySelector("canvas");
  19.  
  20. 		//获取画布上下文对象
  21. 		var ctx=canvas.getContext("2d");
  22.  
  23. 		//绘图步骤： 落笔点->连线->描边
  24. 		
  25. 		ctx.moveTo(100, 100);  //落笔
  26. 		ctx.lineTo(100, 300);  //连线
  27. 		ctx.stroke();		   //描边
  28.  
  29. 	</script>
  30. </body>
  31. </html>

 1.2 解决绘图重绘问题

解决方式一：设置一个stroke()

解决方式二：在绘制新的图形前，开启新的图层（独立互不影响）

未解决前的效果：首先画了最上面的一条线，遇到第二个描边的时候，又重新执行了一次，画了两条线，所以最上面的一条颜色较深。

解决效果：

  1. <head>
  2. 	<meta charset="UTF-8">
  3. 	<title>Document</title>
  4. 	<style type="text/css">
  5. 		canvas {
  6. 			border: 1px solid red;
  7. 		}
  8. 	</style>
  9. </head>
  10.  
  11. <body>
  12. 	<canvas width="600" height="400"></canvas>
  13. 	<script type="text/javascript">
  14. 		//获取canvas画布对象
  15. 		var canvas = document.querySelector("canvas");
  16.  
  17. 		//获取绘图上下文
  18. 		var ctx = canvas.getContext("2d");
  19.  
  20. 		//先落笔
  21. 		ctx.moveTo(100, 100);
  22.  
  23. 		// 连线
  24. 		ctx.lineTo(300, 100);
  25.  
  26. 		//描边
  27. 		ctx.stroke();//方案一，删掉
  28. 		
  29. 		//创建新图层（否则下面的设置会影响上面的图）
  30. 		ctx.beginPath();//方案二，填上图层
  31. 		//带颜色的横线
  32. 		ctx.moveTo(100, 150);//落笔
  33. 		ctx.lineTo(300, 150);//连线
  34. 		ctx.strokeStyle = "red";  //红色的线
  35. 		// ctx.lineWidth = "20";   //设置线宽
  36. 		ctx.stroke();
  37. 	</script>
  38. </body>

2 绘图方法

### 绘图方法
ctx.moveTo(x,y)    落笔点
ctx.lineTo(x,y)    连线
ctx.stroke()       描边

ctx.beginPath()；   开启新的图层

颜色： strokeStyle="值"
线宽： linewidth="值"   备注：不需要带单位

线连接方式：   lineJoin: round | bevel | miter (默认)

线帽（线两端的结束方式）：  lineCap: butt(默认值) | round | square 

闭合路径： ctx.closePath()

2.1 连线方式

线连接方式：   lineJoin:  miter (默认) | round | bevel 

  1. <body>
  2. 	<canvas width="600" height="400"></canvas>
  3. 	<script type="text/javascript">
  4. 		//获取canvas画布对象
  5. 		var canvas = document.querySelector("canvas");
  6. 		//获取绘图上下文
  7. 		var ctx = canvas.getContext("2d");
  8.  
  9. 		ctx.lineWidth = "20";
  10. 		ctx.strokeStyle = "red";
  11.  
  12. 		// 设置线的链接方式
  13. 		ctx.lineJoin = "miter";
  14. 		ctx.moveTo(100, 50);
  15. 		ctx.lineTo(200, 100);
  16. 		ctx.lineTo(100, 150);
  17. 		ctx.stroke();
  18.  
  19. 		ctx.beginPath();
  20.  
  21. 		// 设置线的链接方式
  22. 		ctx.lineJoin = "round";
  23. 		ctx.strokeStyle = "blue";
  24. 		ctx.lineWidth = "20";
  25. 		ctx.moveTo(250, 50);
  26. 		ctx.lineTo(350, 100);
  27. 		ctx.lineTo(250, 150);
  28. 		ctx.stroke();
  29.  
  30. 		ctx.beginPath();
  31.  
  32. 		ctx.lineJoin = "bevel";
  33. 		ctx.strokeStyle = "pink";
  34. 		ctx.lineWidth = "20";
  35. 		ctx.moveTo(400, 50);
  36. 		ctx.lineTo(500, 100);
  37. 		ctx.lineTo(400, 150);
  38. 		ctx.stroke();
  39.  
  40. 	</script>
  41. </body>

2.2线帽

线帽（线两端的结束方式）：  lineCap: butt(默认值) | round | square 

 

  1. <body>
  2. 	<canvas width="600" height="400"></canvas>
  3. 	<script type="text/javascript">
  4. 		//获取canvas画布对象
  5. 		var canvas = document.querySelector("canvas");
  6. 		//获取绘图上下文
  7. 		var ctx = canvas.getContext("2d");
  8.  
  9. 		ctx.strokeStyle = "red";
  10. 		ctx.lineWidth = "20";
  11.  
  12. 		//设置线帽
  13. 		ctx.lineCap = "butt";
  14. 		ctx.moveTo(100, 50);
  15. 		ctx.lineTo(300, 50);
  16. 		ctx.stroke();
  17.  
  18.  
  19. 		ctx.beginPath();
  20.  
  21. 		ctx.lineWidth = "20";
  22. 		ctx.strokeStyle = "blue";
  23. 		//设置线帽
  24. 		ctx.lineCap = "round";
  25. 		ctx.moveTo(100, 100);
  26. 		ctx.lineTo(300, 100);
  27. 		ctx.stroke();
  28.  
  29. 		ctx.beginPath();
  30. 		ctx.lineWidth = "20";
  31. 		ctx.strokeStyle = "green";
  32. 		//设置线帽
  33. 		ctx.lineCap = "square";
  34. 		ctx.moveTo(100, 160);
  35. 		ctx.lineTo(300, 160);
  36. 		ctx.stroke();
  37. 	</script>
  38. </body>

3 渐变方案

注意：

线性渐变用描边ctx.stroke();

径向渐变用填充ctx.fill();

3.1 线性渐变

☞ 线性渐变

1.var grd=ctx.createLinearGradient(x0,y0,x1,y1);

  •  x0-->渐变开始的x坐标
  • y0-->渐变开始的y坐标
  • x1-->渐变结束的x坐标
  •  y1-->渐变结束的y坐标

2、设置渐变颜色方案        

grd.addColorStop(0,"black");设置渐变的开始颜色

grd.addColorStop(0.1,"yellow");   设置渐变的中间颜色

grd.addColorStop(1,"red"); 设置渐变的结束颜色

3、设置颜色

ctx.strokeStyle=grd;

4、描边

ctx.stroke();

备注：

addColorStop(offse,color);

     中渐变的开始位置和结束位置介于0-1之间，0代表开始，1代表结束。中间可以设置任何小数

          

例：

 

  1. <body>
  2. 	<canvas width="600" height="400"></canvas>
  3. 	<script type="text/javascript">
  4. 		//获取canvas画布对象
  5. 		var canvas = document.querySelector("canvas");
  6. 		//获取绘图上下文
  7. 		var ctx = canvas.getContext("2d");
  8.  
  9. 		//创建渐变方案
  10. 		var lgd = ctx.createLinearGradient(100, 50, 300, 50);
  11. 		//添加开始颜色
  12. 		lgd.addColorStop(0, "red");
  13. 		//添加结束颜色
  14. 		lgd.addColorStop(1, "blue");
  15. 		//设置颜色
  16. 		ctx.strokeStyle = lgd;
  17.  
  18. 		ctx.lineWidth = "50";
  19. 		ctx.moveTo(100, 50);//落笔
  20. 		ctx.lineTo(300, 50);//连线
  21. 		ctx.stroke(); //描边
  22.  
  23. 	</script>
  24. </body>

 3.2 径向渐变

☞ 径向渐变

 ctx.createradialGradient(x0,y0,r0,x1,y1,r1);

  • (x0,y0)：渐变的开始圆的 x,y 坐标
  • r0：开始圆的半径
  • (x1,y1)：渐变的结束圆的 x,y 坐标
  • r1：结束圆的半径

1

 

  1. <body>
  2. 	<canvas width="600" height="400"></canvas>
  3. 	<script type="text/javascript">
  4. 		//获取canvas画布对象
  5. 		var canvas = document.querySelector("canvas");
  6. 		//获取绘图上下文
  7. 		var ctx = canvas.getContext("2d");
  8.  
  9. 		var rgd = ctx.createRadialGradient(200, 150, 50, 200, 150, 100);
  10.  
  11. 		rgd.addColorStop(0, "red");
  12. 		rgd.addColorStop(1, "pink");
  13. 		ctx.fillStyle = rgd;
  14. 		ctx.moveTo(100, 50);
  15. 		ctx.lineTo(300, 50);
  16. 		ctx.lineTo(300, 300);
  17. 		ctx.lineTo(100, 300);
  18. 		ctx.closePath();
  19. 		ctx.fill();
  20.  
  21. 	</script>
  22. </body>

4 填充效果

ctx.fill();       设置为填充效果

ctx.fillstyle="值"; 设置填充颜色

4.1 非零环绕原则进行填充 

☞ 非零环绕原则：

1. 任意找一点，越简单越好

2. 以点为圆心，绘制一条射线，越简单越好（相交的边越少越好）

3. 以射线为半径顺时针旋转，相交的边同向记为+1，反方向记为-1，如果相加的区域等于0，则填充。

 4. 非零区域不填充

（就是填充线条方向不同围成的区域）

  1. <body>
  2. 	<canvas width="600" height="400"></canvas>
  3. 	<script type="text/javascript">
  4. 		//获取canvas画布对象
  5. 		var canvas = document.querySelector("canvas");
  6. 		//获取绘图上下文
  7. 		var ctx = canvas.getContext("2d");
  8. 		//顺时针
  9. 		ctx.moveTo(200, 100);
  10. 		ctx.lineTo(400, 100);
  11. 		ctx.lineTo(400, 300);
  12. 		ctx.lineTo(200, 300);
  13. 		ctx.closePath();
  14.  
  15. 		//逆时针
  16. 		ctx.moveTo(250, 150);
  17. 		ctx.lineTo(250, 250);
  18. 		ctx.lineTo(350, 250);
  19. 		ctx.lineTo(350, 150);
  20. 		ctx.closePath();
  21. 		//   ctx.stroke();
  22. 		ctx.fillStyle = "pink";
  23. 		ctx.fill();
  24. 	</script>
  25. </body>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/620457
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号