canvas绘制

在html创建一个canvas画布

<canvas id="canvas" ref="Canvas" />

使用js语句绘制画布

其他方法：

fillText(text,x,y):在画布上绘制实心文本；

strokeText(text,x,y):在画布上绘制空心文本；

fillStyle():设置或返回用于填充绘画的颜色、渐变或模式

fillRect(x,y,width,height) :绘制“被填充”的矩形如 fillRect 方法拥有参数 (0,0,200,100)。即在画布上绘制 200x100 的矩形，从左上角开始 (0,0)。

熟悉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 的能力是通过 context 对象表现出来的，context一般称为绘图环境。

DOMString 为 "2d" 时，context 是 CanvasRenderingContext2D 对象；(本文重点)

DOMString 为 "webgl" 时，context 是 WebGLRenderingContext 对象；

DOMString 为 "webgl2" 时，context 是 WebGL2RenderingContext 对象；

DOMString 为 "bitmaprenderer" 时，context 是 ImageBitmap 对象；

CanvasRenderingContext2D 对象实例 instance 共有16个属性，只要设置了这些属性，就会影响 instance 调用绘制方法时的表现，常用的有：

注意：可使用 instance 的 save() 和 restore() 方法来临时修改 instance 的属性

1、一般用来保存数据，不展示在浏览器页面上，创建的两种方式：a、css 方式设置为 display:none；b、JS创建 documentcreateElement('canvas')；

2、与HTML结合使用：可以采用 CSS 定位的方式，将 HTML 元素置于 canvas 元素之上，比如：在 canva 上叠加一个 div panel 作为某个开关控制界面；选景橡皮筋；时钟等

3、也可使用两个 canvas，一个用来显示，另一个用来做数据准备和处理，这种方式通常效率高，但比较耗费内存

1、准备一个绘制背景的函数，用于每次擦除上一次绘制的结果

2、绘制辅助线

3、监听事件，做坐标转换 windowToCanvas

4、绘制内容的保存于恢复

5、三事件

onmousedown：保存初始 canvas 绘制状态

onmousemove: 更新位置信息，并不断调用初始 canvas 绘制状态来擦除上一个绘制

onmouseup: 调用初始 canvas 绘制状态来擦除上一个绘制，并根据onmousemove保存的信息做最终绘制，将结果绘制在 canvas 上

fillStyle 和 strokeStyle 可以是任意有效的css颜色值或者渐变色以及图像Pattern

canvas 某一时刻只能有一条路径存在，这条路径可以包含多条子路径。用 beginPath 来开始一条新路径或清除上一次子路径

textAlign: left,center,right

textBaseline: top,middle,bottom

1、三属性 font,textAlign,textBaseline

2、三方法 strokeText, fillText, measureText

strokeText(text,x,y,maxWidth) 指定文本超过maxWidth会被缩放

measureText(text)width 返回指定文本宽度

3、水平垂直居中

注意每次变换前，用 save 和 restore 来保存原来绘制上下文

1、由路径定义的一片区域，如一个三角形，矩形，圆形，然后调用 clip 即可得到剪辑区域

2、默认和 canvas 大小一致

3、设置剪辑区域后，浏览器将只对该区域进行绘制

4、调用clip会把剪辑区域设为当前剪辑区域与当前路径定义的区域的交集，故clip 的调用经常在 save 和 restore 之间，这是为了防止剪辑区域越来越小

主要是 drawImage,getImageData,putImageData,createImageData 四个 API

以上就是关于canvas绘制全部的内容，包括:canvas绘制、canvas 2D绘图、Canvas 使用指南等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！