<canvas>画布元素总结

<canvas> 标签定义图形，比如图表和其他图像。是定义一块画布，我们必须利用js脚本在这个画布上操作绘画，比如画个折线图等

• 想要操作画布需要先获取HTML文档里面的画布故需要给<canvas>设置一个ID属性通过   

           var c=document.getEllementById("idname')

• 给该画布创建一个绘画对象即通过getContext()来提供绘画的属性和方法，

          var  ctx=c.getContext("2d') / /定义画布的对象用来操作属性和方法

以下来了解以下canvas的属性分别是描述颜色、线和文字的

fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式（即边框的颜色）
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影距形状的水平距离
shadowOffsetY	设置或返回阴影距形状的垂直距离

lineCap	设置或返回线条的结束端点样式
lineJoin	设置或返回两条线相交时，所创建的拐角类型
lineWidth	设置或返回当前的线条宽度
miterLimit	设置或返回最大斜接长度

font	设置或返回文本内容的当前字体属性
textAlign	设置或返回文本内容的当前对齐方式
textBaseline	设置或返回在绘制文本时使用的当前文本基线

 

下面来总结一下常用的方法

• 颜色的渐变用到的方法是createLinearGradient(x0,y0,x1,y1)

x0	渐变开始点的 x 坐标，渐变到x1的坐标位置
y0	渐变开始点的 y 坐标，渐变到y1的坐标位置
x1	渐变结束点的 x 坐标
y1	渐变结束点的 y 坐标

注意：x,y描述的不是形状的变而是描述颜色的渐变范围。如果x0=x2则说明在x方向是不需要简便的。一般结合addColorStop()方法使用

• addColorStop()方法是说某一个位置的颜色

       addColorStop(stop,color);//createLinearGradient(x0,y0,x1,y1)​​​​​​​生成的变量来调用这个方法

stop	介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color	在结束位置显示的 CSS 颜色值

 

• createPattern()在画布上重复图片或者视频等

   context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

• 绘画矩形的几种方法

rect()	创建矩形
fillRect()	绘制“被填充”的矩形（默认是被黑色填充）
strokeRect()	绘制矩形（无填充仅仅有边框）
clearRect()	在给定的矩形内清除指定的像素（如果画布是有颜色的那么绘画的矩形要清除画布的颜色）

• 下面要介绍一些路径的绘画，即边框线什么的

fill()	填充当前绘图（路径）
stroke()	绘制已定义的路径（当对画布将要呈现的内容已经定义好，告诉对象开始绘画吧）
beginPath()	起始一条路径，或重置当前路径（想当是初始化绘画的其实位置，不管上一个绘画停留到）
moveTo()	把路径移动到画布中的指定点，不创建线条（线的其实位置）
closePath()	创建从当前点回到起始点的路径（要把路径的起点和终点链接起来形成闭环）
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条（路径的终点）
clip()	从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()	创建二次贝塞尔曲线
bezierCurveTo()	创建三次方贝塞尔曲线
arc()	创建弧/曲线（用于创建圆形或部分圆）（创建圆形，其实坐标表示的是圆心的位置）
arcTo()	创建两切线之间的弧/曲线
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false

注意：在描述碗边狂吼我们一定要调用stroke（）方法去告诉他画吧

• 文字相关的方法

fillText()	在画布上绘制“被填充的”文本
strokeText()	在画布上绘制文本（无填充）（空心字）
measureText()	返回包含指定文本宽度的对象

• 图片相关的方法

drawImage()

向画布上绘制图像、画布或视频

 

先关例子可以参考：https://www.runoob.com/html/html5-canvas.html