HTML5绘图总结详解

Posted 2020-11-09 bdqnit

HTML5的绘图基础

? 在html5以前的时代，web前端开发者无法在HTML页面上动态地绘制图片
? HTM5新增了一个<canvas../>元素，相当于一个画布，可以获得一个CanvasRenderingContext2D对象
? CanvasRenderingContext2D提供了很多画图API

HTML5的画图主要是通过CanvasRenderingContext2D这个对象的API来完成的，画图的所有方法都被封装到它里边。
在学习内容中，我们都是简称这个对象为：cxt。

 

在Canvas上画图的流程

? 步骤1:得到 <canvas../>DOM对象
? 步骤2:调用Canvas对象的getContext()方法得到CanvasRederingContext2D对象（getContext方法里面传一个参数：”2d”）
? 步骤3:调用CanvasRederingContext2D完成画图

 

HTML5绘制几何图形

CanvasRenderingContext2D对象，只提供了两个方法来绘制几何图形

1. fillStyle="颜色"
2. filleRect(float x,float y,float width,float,height)
3. strokeStyle="颜色"
4. lineWidth=10;
5. lineJoin="meter|round|bevel"
6. strokeRect(float x,float y,float width,float,height)

并没有直接提供其他几何图形（圆形、椭圆、三角）等方法（这些我们都要通过路径来实现）

 

画空心和实心

1. 画实心的话，我们可以用fillStyle来设置一下实心的颜色。
2. 然后fillRect来画一个实心的矩形框。
3. 那空心的话，我们用strokeStyle，来设置颜色。
4. lineWidth来设置线条的宽度。
5. 然后lineJoin设置线条交界处，是方角还是圆角。
6. 然后strokeRect来画一个空心的矩形。

HTML5绘制字符串

CanvasRenderingContext2D为绘制文字提供了以下两个方法：
fillText(String text，float x，float y，[float maxwidth]):填 充字符串
strokeText(String text，float x，float y，[float maxwidth]):绘制边框
font="bold 45px 宋体"
textAlign设置绘制字符串的水平对齐方式，start|end|left|right|center
textBaseAlign:重直对齐方式：top|hanging|middle|alphabetic|bottom

在画字符串之前，在html5中我们应该使用font="bold 45px 宋体"，设置一下字体，这个字体里面其实是3个属性。分别表示文字的：粗细、大小和字体。

在设置完了以后，就可以画文字了。fillText是画的实心的文字；strokeText是画的空心的文字。

设置阴影

shadowBlur:阴影模糊度，浮点数越大越模糊
shasowColor:阴影颜色
shadowOffsetX: x方向的偏移
shadowOffsetY: y方向的偏移

绘制路径

在Canvas上使用路径步骤：

1. 调用CanvasRenderingContext2D对象的beginPath()方法开始定义路径
2. 调用CanvasRenderingContext2D的各种方法添加路径
3. 调用CanvasRenderingContext2D的closePath方法关闭路径
4. 调用CanvasRenderingContext2D的fill()或stroke()方法来填充路径或绘制路径边框

添加路径的方法

1. arc() 方法创建弧/曲线（用于创建圆或部分圆
2. arcTo() 方法在画布上创建介于两个切线之间的弧/曲线
3. bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。方法在画布上创建介于两个切线之间的弧/曲线
4. lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）
5. moveTo 把路径移动到画布中的指定点，不创建线条
6. quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
7. rect() 方法创建矩形

控制填充风格

线性渐变

1. CanvasGradient代表渐变填充
2. CanvasPattern代表位团填充

使用渐变步骤

3. step1:ctx.createLinearGradient(x,y,xend,yend)返回CavasGradient对象
4. step2:调用CanvasGradient对象的addColorStop(offset,color)向线性渐变中填加颜色,offset值在0-1之间
5. step3:将CanvasGradient对象赋值给xtx.fillStyle或strokeStyle属性

这个渐变，我们有线性渐变和圆形渐变，还有填充图像。

圆形渐变：

这个它的原理也是和线性渐变一样的，就是两个圆，半径到半径之间的这个渐变。

 

绘制位图

1. CanvasRenderingContext2D绘图方法：

drawImage(Image image,x,y)

参数 描述
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）

2. 绘制位图

? var image=new Image();
? image.src=图片地址;
? image.onload=function()
? {
? ctx.drawImage(...);
? }

3.绘制位图有一个细节一定要注意：

就是必须得等这个位图加载完毕之后，才能绘制，否则的话，就绘制失败。反正原理就是，在绘图之前，这个图片是加载到内存的，加载完这个DOM才能进行绘图。