24画布基本知识综述
本文主要介绍了24画布的基本知识总结，非常全面和详细，推荐给大家。画布的知识要点概括如下，以便随时参考。
1、矩形填充FillRect（X，Y，宽度，高度）；
2、绘制矩形边界strokerect（x，y，宽度，高度）；
3、擦除矩形clearRect（x，y，宽度，高度）；
4。填写方式fillStyle =红色；风格可以是颜色，渐变，和图像。
5、脑卒中的红strokeStyle =；
6笔，线宽线宽= 4；
7、线的线帽=对接的结束；对接（对接） /圆（圆）/平方（平方），默认情况下是屁股；
8、线路交叉式线连接=人字；人字（尖角） /圆（角） /锥（斜），默认的尖角；
9，开始绘制路径（）调用；
10、结束路径closepath（）；在创建的路径，如果你想画一条线连接到路的起点，你可以叫closepath（）；
11、画弧（x，y，半径，startangle，EndAngle，真/假）；
12、画弧（x1，y1，北极X2，Y2，半径）从以前的点画一天弧，以X2，Y2，和对于一个给定的半径通过X1，Y1；
13, moveTO (x, y); move the plotting cursor to (x, y) and do not draw a line
14、（x，y）线；从以前的点绘制直线
15、贝塞尔曲线：quadraticcurveto（CX，CY，x，y）；从以前的点绘制曲线，X，Y，CX，CY作为控制点。
16、三次贝塞尔曲线beziercurveto（1，2，CY1、CY2，x，y）；从这一点上，我们得出两次曲线，X，Y，1，CY1和1为控制点。
17、矩形（X，Y，宽度，高度）；从点x，y开始画一个矩形的宽度和高度，以及指定的宽度和高度，分别。此方法绘制一个矩形路径，不是一个独立的形状。
18。画课文：
（1）填充文字：filltext（你好
（2）文字笔画：stroketext（你好，X，Y，宽度）；宽度是可选的最大像素宽度。
（3）文字样式：字体为宋体加粗14px ；
（4）文本的水平对齐：.TextAlign =开始'； / /开始，结束，左，右，中心。默认值：开始。基准点的纵向轴线与起点对齐（x，y）。
（5）垂直对齐文本：textbaseline = 'alphabetic '； / /顶，挂，中间字母，表意，底部。默认值：按字母顺序排列的。水平轴与文本的起始点（x，y）为对齐基准点。
（6）文本的宽度：var text =hello；var长度= context.measuretext（文本）；要绘制的文本参数文本
19。转型
（1）旋转（角度）：旋转图像角度弧围绕原点旋转。
变换（Math.cos（角数学。π/ 180），Math.sin（角数学。π/ 180），-math.sin（角数学。π/ 180），Math.cos（角数学。π/ 180），0,0）也可以用。
（2）量表（X，Y）：缩放图像。变换（x，y，0，0）也可以用。
（3）翻译（x，y）：移动X，Y坐标原点的，而此转换后的坐标0,0将成为表达的X，Y（X，Y 1,0,0,1变换，）也可以用。
（4）转换（，，x，y）；
（5）settransform（，，，x，y）；变换矩阵重置为默认状态，然后调用变换（）；
20，图形组合
复制代码代码如下所示：
背景。fillStyle =蓝色；
（1010100100）context.fillrect；
背景。globalcompositeoperation = 'lighter '； / * * /在可选值等。
背景。fillStyle =红色；
context.arc（110,60,50,0，数学。PI * 2，假）；
Context.fill（）；
*
源代码溢出（默认值）：
目的地：在原始图形下绘制新图形
源代码：新的图形和原始图形用于操作，只有新图形的部分与原始图形重叠。
目的地：原来的图形和新的图形在运行显示新的图形重叠的图形部分。
源码说明：新的图形和原来的图形为外操作，只显示新的图形和原始图形不重叠的部分。
目的地：新的图形和原来的图形用于进行操作，只显示新的图形和原始图形不重叠的部分。
源于顶部：只绘制新图形和原始图形和未重叠的原始图形的部分。
目的地：只绘制新图形的部分和原始图形中新图形的其他部分。
打火机：原来的图形和新的图形绘制，重叠添加颜色处理。
异或：只画不重叠新图形和原图形的部分，重叠部分是透明的。
复制：只绘制新图形
* /
21。绘制图形阴影
复制代码代码如下所示：
背景。shadowoffsetx = 10；的影子 / /水平位移
背景。shadowoffsety = 10；的影子 / /纵向位移
背景。shadowcolor = 'rgba（100100100,0.5 '）； / /阴影的颜色
背景。shadowblur = 7； / /模糊阴影范围
22。绘制、铺设、切割图像
复制代码代码如下所示：
context.drawimage（图像，x，y）；
context.drawimage（x，y，图像，W，H）；
context.drawimage（图像、SX，SY，SW，SH，dx，dy，DW，DH）；SX，DH和X，是初始坐标和复制区域的源图像的高度，和目标坐标和复制区域的高度。
context.createpattern（图像、型）；图像是铺好的参数可以是：没有重复，repeat-x，纵向重复，重复；
（上下文剪辑）；剪切功能
实例uff1a
复制代码代码如下所示：
图像=新的（图像）；创建图像对象
图片…；
VaR测试= context.createpattern（图像，'repeat-y '）； / / createpattern设置扩散效应，
背景。fillStyle =测试；
（00400400）context.fillrect；
（图像。指针函数）这种方法是{ / /功能，如果图片是一个网络的图像文件比较大，为防止图像满载只看到图像，这样你可以边加载边。
DrawImg（背景、图像）；
}
功能drawimg（背景、图像）{
原始图像{绘图}
context.drawimage（图像1010125125）；
/本地放大
context.drawimage（图像，20,09010015010125125）；
context.rect（20,20,80,80）；
context.clip（）；
context.drawimage（图像00200200）；
}
23，保存、恢复
contex.save（）；保存当前状态的叠加。注意：保存仅设置和绘制图形变换，以及绘制的内容将不会被保存。
context.restore（）；图形的叠前取出堆栈保存状态
哪里可以应用：
（1）图像或图形变形
（2）图像切割
（3）当改变图形上下文，性能的填充颜色，字体，globalAlpha、globalcomposite操作，线帽，线连接，线宽，miterlimit，shadowblur，shadowcolor。
ShadowOffsetX，shadowoffsety，strokeStyle，TextAlign，textbaseline
24，线性梯度
复制代码代码如下所示：
VaR（G = context.createlineargradient xStart，ystart，Xen，yEnd）；
VaR（G1 = context.createradialgradient xStart，ystrat，radiusstrat，Xen，yEnd，radiusend）；
G.addColorStop（0'）；
G.addColorStop（0，绿色的）；
背景。fillStyle = G；
（00200200）context.fillrect；