canvas 2D绘图

Posted 2023-05-04

参考技术A 熟悉html5的程序员们肯定都知道<canvas>元素，该元素是用来在页面中规定一块区域，然后由js在该区域内绘制图形。canvas支持2D绘图和名为WebGL的3D绘图。

<canvas>元素需要通过width和height属性指定绘图区域大小。且标签中间的内容在浏览器不支持<canvas>元素时会显示。

要在这块画布上绘图，首先要通过getContext()方法取得绘图上下文。参数为“2d”，就可以取得2D上下文对象。

2D上下文的坐标原点(0,0)是<canvas>元素的左上角。x值越大表示越靠右，y值越大表示越靠下。

渐变对象和模式对象，后面会讨论。
2D上下文可以绘制简单的2D图形，如矩形、路径和文本等。

矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形有关的方法包括： fillRect() 、 strokeRect() 和 clearRect() 。这三个方法都能接受4个参数：矩形左上角的X坐标、矩形左上角的Y坐标、矩形的宽度和矩形的高度。 fillRect() 方法填充指定矩形区域。填充的样式通过属性 fillStyle 设置。

2D上下文支持很多在画布上绘制路径的方法，通过这些路径可以创造出复杂的形状和线条。在绘制路径之前，首先必须调用beginPath()方法，表示要开始绘制新路径。绘制路径的方法包括：

绘制文本主要有两个方法： fillText() 和 strokeText() 。这两个方法都能接受4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。文本的样式通过下面的属性指定：

2D上下文还支持绘制图像，可以调用 drawImage() 方法将一幅图像绘制到画布上。可使用下面3中方式调用drawImage()方法。

即从image图像上选取以(0, 10)为起点，长宽分别为50的矩形区域，并将这块区域的图像绘制到画布上，绘制后的图形的起点为(0, 100)， 宽度为40， 长度为60。
也可以将另一个<canvas>元素作为drawImage()方法的第一个参数。

前面提到， fillStyle 和 strokeStyle 的值可为渐变对象和模式对象。渐变分为两种：线性渐变和径向渐变。
可使用 createLinearGradient() 方法创建线性渐变，接收4个参数：起点的x坐标、起点的y坐标、终点的x坐标、终点的y坐标，并返回CanvasGradient对象的实例。它会创建一个指定大小的渐变。
创建渐变对象后，下一步就是调用渐变对象的 addColorStop() 方法指定渐变开始的颜色和渐变终止的颜色，色标位置的一个0到1之间的数字。

模式其实就是以何种方式重复图像，可使用 createPattern() 方法创建模式，参数为图像元素和表示图像重复方式的字符串，包括"repeat"、"repeat-x"、"repeat-y"和"no-repeat"。

2D上下文支持为图形或者路径设置阴影，涉及的属性值：

2D绘制上下文支持各种基本的绘制变换，可旋转、缩放、移动坐标原点等，包括：

在进行重新设置填充、描边或变换后，如果想使用之前的某组属性与变换组合，可以在重置之前调用save()方法将这组属性和变换保存。有一个栈结构来保存这些记录，为先进后出。如果想回到之前保存的设置时，可以调用restore()方法。

canvas 效果 能做背景效果吗

参考技术A 能。
比如把canvas放到最底层。