HTML5热火，最新的想法也是使用html相关的功能，所以还需要好好学习一下。
好好看看画布的功能，感觉HTML5在客户端交互中的功能越来越强。今天我们看到了帆布画。下面有几个例子。
1，用画布画一条直线：
xml代码将内容复制到剪贴板。
帆布{边界：冲2px # CCC }
函数（id）{ $
返回document.getelementbyid（ID）；
}
功能pageload（）{
无功能（）= $；
VaR康康舞= can.getcontext（二维的）；
Cans.moveTo（20,30）； / /第一出发点
Cans.lineTo（120,90）； / /二点
Cans.lineTo（220,60）； / /第三点（二点为起点）
罐头，线宽= 3；
cans.strokestyle ='；
cans.stroke（）；
}
四
这里使用的是两个API方法将和线，这是起点和终点坐标分别为段。变量（X坐标，Y坐标），和strokeStyle和中风分别绘制图案，绘制路径。
2。绘制渐变线
渐变线是渐变色的效果。当然，渐变的样式可以按照路径的方向进行，而不遵循路径的方向。
xml代码将内容复制到剪贴板。
帆布{边界：冲2px # CCC }
函数（id）{ $
返回document.getelementbyid（ID）；
}
功能pageload（）{
无功能（）= $；
VaR康康舞= can.getcontext（二维的）；
Cans.moveTo（0,0）；
Cans.lineTo（400300）；
VaR为GNT1 = cans.createlineargradient（00400300）； / /线性渐变的起点和终点坐标
gnt1.addcolorstop（0'）； / /创建颜色渐变，0偏移，对线的相对位置的个人理解，最高是1，梯度可以写任意渐变色
gnt1.addcolorstop（1''）；
罐头，线宽= 3；
cans.strokestyle =为GNT1；
cans.stroke（）；
}
四
三.画矩形或正方形：
这个矩形框只能产生使用HTML4代替背景代码。现在HTML5提供的画布功能非常容易绘制，HTML5的优越性相当高。
xml代码将内容复制到剪贴板。
帆布{边界：冲2px # CCC }
函数（id）{ $
返回document.getelementbyid（ID）；
}
功能pageload（）{
无功能（）= $；
VaR康康舞= can.getcontext（二维的）；
cans.fillstyle ='；
（3030340240）cans.fillrect；
}
四
这里我们使用了一个方法：mdash；mdash；用（）；实际上，我们也可以知道这是填充一个矩形。这里的参数值得说明的是用（x，Y，宽度，高度），它不同于数学中的坐标。
这里，x，y是相对于画布左上角的起始点，记得吗！
4。画一个简单的矩形盒子
在上面提到的绘制矩形的例子中，填充了颜色，这个例子只是画了一个矩形，却没有实现填充效果。
xml代码将内容复制到剪贴板。
帆布{边界：冲2px # CCC }
函数（id）{ $
返回document.getelementbyid（ID）；
}
功能pageload（）{
无功能（）= $；
VaR康康舞= can.getcontext（二维的）；
cans.strokestyle ='；
（3030340240）cans.strokerect；
}
四
这是非常简单的，这是相同的，填充将替换为笔画，请看具体的例子。
5。绘制矩形的线性渐变
渐变对于填充是一个很好的效果，通过实例2和实例3，我们可以创建一个渐变矩形。
xml代码将内容复制到剪贴板。
帆布{边界：冲2px # CCC }
函数（id）{ $
返回document.getelementbyid（ID）；
}
功能pageload（）{
无功能（）= $；
VaR康康舞= can.getcontext（二维的）；
VaR为GNT1 = cans.createlineargradient（100390,0）；
gnt1.addcolorstop（0'）；
gnt1.addcolorstop（0.5、绿色）；
gnt1.addcolorstop（1，'蓝色'）；
cans.fillstyle =为GNT1；
（1010380280）cans.fillrect；
}
四
没有解释，记得用（x，y，宽度，高度）。
6。填写一个圈
圆被广泛使用，当然，椭圆。
xml代码将内容复制到剪贴板。
帆布{边界：冲2px # CCC }
函数（id）{ $
返回document.getelementbyid（ID）；
}
功能pageload（）{
无功能（）= $；
VaR康康舞= can.getcontext（二维的）；
Cans.beginPath（）；
Cans.arc（200150100,0，数学。π×2，真的）；
Cans.closePath（）；
cans.fillstyle =绿色； / /在最初使用的是红色的，一看截图，傻眼了，事实上是一个爱国者，害怕，你知道的。
Cans.fill（）；
}
四
这里的圆弧法使用弧（x，y，半径，startangle，EndAngle，逆时针），这意味着（X坐标的中心，中心的Y坐标、半径、起始角（弧度），结束角度弧度，无论是顺时针方向）。
电弧参数的比较：
一、cans.arc（200150100,0，Math.PI，真的）；
C、cans.arc（200150100,0，数学。PI / 2，真的）；
C、cans.arc（200150100,0，数学。PI / 2，真的）；
D、cans.arc（200150100,0，数学。PI / 2，假）；
7、圆形砌块
xml代码将内容复制到剪贴板。
帆布{边界：冲2px # CCC }
函数（id）{ $
返回document.getelementbyid（ID）；
}
功能pageload（）{
无功能（）= $；
VaR康康舞= can.getcontext（二维的）；
Cans.beginPath（）；
Cans.arc（200150100,0，数学。PI * 2，假）；
Cans.closePath（）；
cans.linewidth = 5；
cans.strokestyle ='；
cans.stroke（）；
}
四
这里没有解释这一点。和上面的例子一样，线宽控制线条的宽度。
8，圆梯度
xml代码将内容复制到剪贴板。
帆布{边界：冲2px # CCC }
函数（id）{ $
返回document.getelementbyid（ID）；
}
功能pageload（）{
无功能（）= $；
VaR康康舞= can.getcontext（二维的）；
VaR GNT = cans.createradialgradient（20030050200200200）；
Gnt.addColorStop（1'）；
Gnt.addColorStop（0，绿色的）；
cans.fillstyle = GNT；
（00800600）cans.fillrect；
}
四
需要说明的createradialgradient方法参数（xStart，Ystart，XEnd，radiusstart，yEnd，radiusend），也就是说，它是在梯度实现的两圆的使用，一个是原来的圆圈，一个圈其实是渐进的，，的坐标和半径的控制方法你可以实现很多风格，例如
立体循环
xml代码将内容复制到剪贴板。
VaR GNT = cans.createradialgradient（200150020050250）；
Gnt.addColorStop（0'）；
Gnt.addColorStop（1，333#）；
