canvas学习笔记

原创已于 2022-04-21 17:33:21 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #html5

于 2022-04-20 10:05:38 首次发布

日常总结同时被 2 个专栏收录

38 篇文章

订阅专栏

个人总结

34 篇文章

订阅专栏

本文详细介绍了HTML5 Canvas的基本用法，包括如何设置 canvas 大小、提供备用内容以及获取渲染上下文。通过实例展示了如何绘制矩形、路径以及圆弧，并探讨了二次贝塞尔曲线和三次贝塞尔曲线的绘制。此外，还提到了Path2D对象的使用，用于路径操作的优化。文章旨在帮助开发者系统性地理解和掌握Canvas的图形绘制能力。

之前有用到canvas的时候都是当下去网上扒扒，没有系统性的去深入学习，刚好最近又要用到canvas，就系统性的学习一下，在这里记录一下，方便以后查阅（参考资料是MDN）。

什么是canvas
<canvans>是一种可以使用脚本(通常是JavaScript)在上面绘制图形的特殊的HTML元素，默认大小是300像素x150像素，为了在Canvas上绘制图形，我们使用一个JavaScript上下文对象，它能动态创建图像。

基本用法

<canvas id="mycanvas" width="150" height="150"></canvas>

<canvas>看起来和<img>元素很像，唯一不同的是他没有src和alt属性。实际上，<canvas>标签只有两个属性：width和height。

2.1 替换内容
<canvas>元素与<img>标签不同之处在于，<canvas>标签中提供了替换内容，不支持<canvas>的浏览器会忽略容器并渲染后备内容。而支持<canvas>的浏览器会忽略容器中包含的内容，并且只是正常的渲染canvas
例：

<canvas id="mycanvas">
	<img src="xxx/xxx.png" width="300" height="150" alt="" />
</canvas>

2.2 渲染上下文（The rendering context）
<canvas>元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。canvas期初是空白的，为了展示，首先脚本需要找到渲染上下文(getContext()，接受一个参数来控制上下文的类型)，然后再它上面绘制。
2.3 例子

<html lang="en">

	<head>
		<style>
		  #mycanvas {
	    	border: 1px dotted red;
		  }
		</style>
	</head>

	<body>
	  <canvas id="mycanvas" width="250" height="200"></canvas>
	</body>
<script>
  window.onload = () => {
	draw();
  }
  function draw() {
    var canvas = document.querySelector('#mycanvas');
	if (canvas.getContext('2d')) {
      var ctx = canvas.getContext('2d');
	  ctx.fillStyle = 'rgb(200, 0, 0)';
      ctx.fillRect(10, 10, 55, 50);
	  ctx.fillStyle = '#0f0';
      ctx.strokeRect(30, 30, 55, 50);
	  ctx.clearRect(50,50,50,50);
    }
  }
</script>

</html>

效果如下：

绘制矩形
canvas提供了三种方法绘制矩形：
绘制一个填充的矩形：
fillRect(x, y, width, height)
绘制一个矩形边框：
strokeRect(x, y, width, height)
清楚指定矩形区域，让清楚部分完全透明：
clearRect(x, y, width, height)
其中x与y指定了canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。
图1中的例子首先用fillRect绘制了一个边长为180的正方形，然后把这个180的正方形用clearRect清除出一个140的正方形，再在中间绘制一个100的正方形。
这三个函数绘制之后立马会显示到画布上，即时生效。
绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连接成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。
1.首先创建路径的起点。
2.使用画图命令去画出路径。
3.把路径封闭。
4.通过描边或填充路径区域来渲染图形。
以下是所要用到的函数：
新建路径：
beginPath()
关闭路径：
closePath()
通过线条绘制图形轮廓：
stroke()
填充路径的内容区域生成实心图形：
fille()
绘制一个三角形：
```
function draw() {
	var canvas = document.querySelector('#mycanvas');
    if (canvas.getContext('2d')) {
	  var ctx = canvas.getContext('2d');
	  ctx.fillStyle = "#00f";
	  ctx.beginPath();
	  ctx.moveTo(75, 50);
	  ctx.lineTo(100, 75);
	  ctx.lineTo(100, 25);
	  ctx.fill();
	 }
}
```
moveTo(x，y)
相当于现实中的提笔，你要书写的时候首先要把笔尖放到相应的位置。
lineTo(x, y)
绘制一条从当前位置到指定x以及y位置的直线
圆弧
绘制圆弧或者圆，我们使用arc()方法。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以(x, y)为圆心以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认是顺时针）来生成。
arcTo(x1, y1, x2, y2, radius)根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
二次贝塞尔曲线及三次贝塞尔曲线
quadraticCurveTo(cp1x, cp1y, x, y)二次贝塞尔曲线，(cp1x, cp1y)为一个控制点，(x,y)为结束点。
bezierCurveTo(cp1x, cp2y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线
矩形
rect(x, y, width, height)绘制一个左上角坐标为(x, y)，宽高为width以及height的矩形。
Path2D对象
用来缓存或记录会画命令，这样你将能快速地回顾路径。
new Path2D() 空的Path对象
new Path2D(path) 克隆Path对象
new Path2D(d) 从SVG建立Path对象
所有的路径方法比如：moveTo，rect，arc或quadraticCurveTo等。
Path2D API添加了addPath作为将path结合起来的方法。当你想要从几个元素中来创建对象时，这将会很实用
Path2D.addPath(path [, transform])添加了一条路径到当前路径。
利用stroke和fill可以把对象画在画布上。