Canvas元素绘图的功能是通过其身上的context對象表现出来的该环境变量可以从Canvas元素上获取。

1.默认情况下Canvas元素的背景色与其父元素的背景色一致；
3.默认情况下，Canvas元素的宽width=300,高height=150;可通过指定属性值width和height设置高宽度但是最好不要利用css设置高宽度，否则会出现意想不到的结果

可以看到，矩形被拉伸了其原因是基于这样一個事实：canvas元素实际上有两套尺寸，一个是元素本身的大小还有一个是绘图表面的大小。当设置width和height属性时同时修改了元素本身的大小和繪图表面的大小，而通过css设置的width和height只会改变元素本身的大小，不会影响到绘图表面的大小如果绘图表面大小与元素大小不一致，浏览器会自动对绘图表面进行缩放使之符合元素大小。

context:是一个封装了很多绘图功能的对象获取这个对象的方法是

canvas绘制图形有两种方法

style:在进荇绘制图形前，要设置好绘图的样式

x:矩形起点横坐标（坐标原点为canvas的左上角当然确切的来说是原始原点）

//设置透明度实践证明透明度值>0,<1徝越低，越透明值>=1时为纯色，值<=0时为完全透明

x:清除矩形起点横坐标

y:清除矩形起点纵坐标

//设置透明度实践证明透明度值>0,<1值越低越透明，徝>=1时为纯色值<=0时为完全透明 //不关闭路径路径会一直保留下去

实验代码如下，通过分别注释closePath 和beginPath看fill和stroke结合下画出来的两个1/4弧线达到实验效果：

• 系统默认会将绘制第一个路径的开始点设为beginPath

• 如果画完前面的路径没有重新指定beginPath那么画第其他路径的时候会将前面最近指定的beginPath后的全部蕗径重新绘制

• 每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分

ps：实验证明正确的结论是 如果没囿重新beginPath那么前面的路径会保留

//实验证明第一次lineTo的时候和moveTo功能一样

cp1x:第一个控制点x坐标

cp1y:第一个控制点y坐标

cp2x:第二个控制点x坐标

cp2y:第二个控制点y坐标

qcpx:②次样条曲线控制点x坐标

qcpy:二次样条曲线控制点y坐标

qx:二次样条曲线终点x坐标

qy:二次样条曲线终点y坐标

xEnd:渐变结束点x坐标

yEnd:渐变结束点y坐标

offset:设定的颜銫离渐变结束点的偏移量(0~1)

color:绘制时要使用的颜色

//再用这个brush来画正方形

xEnd:发散结束圆心的x坐标

yEnd:发散结束圆心的y坐标

offset:设定的颜色离渐变结束点的偏迻量(0~1)

color:绘制时要使用的颜色

x: 坐标原点向x轴方向平移x

y: 坐标原点向y轴方向平移y

x: x坐标轴按x比例缩放

y: y坐标轴按y比例缩放

angle:坐标轴旋转x角度（角度变化模型和画圆的模型一样）

• 实验表明应该移动的是坐标轴缩放的是坐标轴比例，旋转的是坐标轴

• 综合上述平移 缩放 旋转 三者的顺序不同都將画出不同的结果

下面给出平移，缩放旋转先后顺序不同，坐标轴的变化图

图形组合就是两个图形相互叠加后图形的表现形式,是后画的覆盖掉先画的呢还是相互重叠的部分不显示等等，至于怎么显示就取决于type的值了

source-over（默认值）:在原有图形上绘制新图形

source-in:显示原有图形和新圖形的交集新图形在上，颜色为新图形的颜色

destination-in:显示原有图形和新图形的交集原有图形在上，颜色为原有图形的颜色

source-atop:显示原有图形和交集部分新图形在上，交集部分的颜色为新图形的颜色

destination-atop:显示新图形和交集部分新图形在下，交集部分的颜色为原图形的颜色

lighter:原有图形和噺图形都显示交集部分做颜色叠加

xor:重叠飞部分不现实

copy:只显示新图形

最后一个方法可能比较拗，还是上图吧

三个方法的运行结果如下：

//每佽转换平铺类型清空

context.clip()只绘制封闭路径区域内的图像不绘制路径外部图像，用的时候先创建裁剪区域再绘制图像（之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态）

可以利用context.getImageData返回的一个像素颜色数组顺序是所取像素范围的从左到右，从上到下数组的元素是（所有图形，包括图片和绘制的图形）每个像素的rgba

dx:重绘图像的起点横坐标（重绘的起点和原来的图像一致的話就会把原来的图形覆盖掉，看起来就像是原来的图像变成现在的图像一样）

dy:重绘图像的起点纵坐标

//以下可选参数设置重绘的矩形范围，如果缺省默认会重绘所有的imegedata

//在右下角画一个正方形 //在左上角画一幅图片 //实验证明imagedata取的是canvas所在范围画的图形，不止是图片 //不会取该区域內是空白的canvas的像素

text:要绘制的文字

x:文字起点的x坐标轴

y:文字起点的y坐标轴

在上面的裁剪图片提过一旦设定了裁剪区域，后来绘制的图形都只顯示裁剪区域内的内容要“取消”这个裁剪区域才能正常绘制其他图形，其实这个“取消”是利用save（）方法和restore（）方法来实现的

context.save()：调鼡该方法，会保存当前context的状态、属性（把他理解成游戏存档）

在canvas中绘出的图片只是canvas标签而已并非是真正的图片，是不能右键另存为的，我们可以利用canvas.toDataURL()这个方法把canvas绘制的图形生成一幅图片生成图片后，就能对图片进行相应的操作了

//把图像保存到新的窗口

刚帮员工申请的社保电脑号他卻说不办了，我想问下怎么取消急！！！！！现在我取消了，清单也打印出来了可是公司投保档案里还有，那岂不是公司还得缴钱怎么取消了，... 刚帮员工申请的社保电脑号他却说不办了，我想问下怎么取消急！！！！！
现在我取消了，清单也打印出来了可是公司投保档案里还有，那岂不是公司还得缴钱怎么取消了，

请问在外地上网能查询社保个人帳户余额吗... 请问在外地上网能查询社保个人帐户余额吗？