5ba626b379994d53f7acf72a64f9b697标签是html5中新添加的元素，用于页面中绘图功能，借助于js5ba626b379994d53f7acf72a64f9b697可以绘制出各种您需要的图形，本文就来了解一下5ba626b379994d53f7acf72a64f9b697绘图标签的详细使用教程。
5ba626b379994d53f7acf72a64f9b697html标签：
<canvas id="demo-canvas" width="800" height="800"> 您的浏览器不支持<canvas>,建议升级。 </canvas>
我们可能通过js的document.getelementbyid获取<canvas>
<script type="text/javascript"> var canvas = document.getelementbyid("demo-canvas"); <script>
使用<canvas>首先要进行初始化
if (canvas.getcontext){ var ctx = canvas.getcontext('2d'); //目前canvas只支持2d，不支持3d }
canvas 的基本用法
ctx.fillrect(x, y, width, height)
画一个填充的矩形，x, y是矩形左上坐标，width, height是矩形的宽度和高度。
示例
ctx.strokerect(x, y, width, height)
画一个带边框的矩形，只画线不填充，参数同上。
示例
ctx.clearrect(x, y, width, height)
把指定的区域删除，参数同上。
示例
ctx.fillstyle(“”)
填充颜色（颜色值可直接用颜色名称:”red” “green” “blue”， 十六进制颜色值: “#eeeeff”， rgb(1-255,1-255,1-255)， rgba(1-255,1-255,1-255,透明度)）。
示例
ctx.strokestyle(“”)
边框颜色（颜色同上）。
示例
ctx.arc(x, y, radius, startangle, endangle, anticlockwise)
画圆（弧）,画圆或者圆弧。x,y为圆心坐标，radius为半径，startangle,endangle为开始/结束划圆的角度，anticlockwise为是否逆时针画圆（true为逆时针，false为顺时针）。
示例
路径  context.beginpath()    context.closepath()
画圆并不单单是直接用arc，它还用到beginpath()方法，和closepath()方法，如果没有重新beginpath那么前面的路劲会保留。
a、系统默认在绘制第一个路径的开始点为beginpath。
b、如果画完前面的路径没有重新指定beginpath，那么画第其他路径的时候会将前面最近指定的beginpath后的全部路径重新绘制。
c、每次调用context.fill()的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分。
示例
绘制线段 context.moveto(x,y)  context.lineto(x,y)
从moveto(x,y)  到 lineto(x,y)绘制直线，如果没有moveto那么起点就是linkto， 每次lineto后如果没有moveto，那么下次lineto的开始点为前一次lineto的结束点。
示例
绘制贝塞尔曲线（贝济埃、bezier） context.beziercurveto(cp1x,cp1y,cp2x,cp2y,x,y) ,绘制二次样条曲线 context.quadraticcurveto(qcpx,qcpy,qx,qy)
cp1x:第一个控制点x坐标
cp1y:第一个控制点y坐标
cp2x:第二个控制点x坐标
cp2y:第二个控制点y坐标
x:终点x坐标
y:终点y坐标qcpx:二次样条曲线控制点x坐标
qcpy:二次样条曲线控制点y坐标
qx:二次样条曲线终点x坐标
qy:二次样条曲线终点y坐标
示例
线性渐变 var lg= context.createlineargradient(xstart,ystart,xend,yend) 线性渐变颜色lg.addcolorstop(offset,color)
xstart:渐变开始点x坐标
ystart:渐变开始点y坐标
xend:渐变结束点x坐标
yend:渐变结束点y坐标
offset:设定的颜色离渐变结束点的偏移量(0~1)
color:绘制时要使用的颜色
示例
径向渐变（发散）var rg=context.createradialgradient(xstart,ystart,radiusstart,xend,yend,radiusend)径向渐变（发散）颜色rg.addcolorstop(offset,color)
xstart:发散开始圆心x坐标
ystart:发散开始圆心y坐标
radiusstart:发散开始圆的半径
xend:发散结束圆心的x坐标
yend:发散结束圆心的y坐标
radiusend:发散结束圆的半径
offset:设定的颜色离渐变结束点的偏移量(0~1)
color:绘制时要使用的颜色
以上就是html canvas绘图使用详解的内容。