css3中的画布canvas

<canvas id = "canvas" width="400" height="300">

</canvas>定义了一个宽400px，高300px 的画布
//获取画布
            var canvas= document.getElementById("canvas")
            //通过画布对象得到画布上下文对象，通过2d，二维平面上面开始后续的操作
            var context=canvas.getContext("2d");
context.moveTo(x,y)-------这是起点位置
context.lineTo(x,y)---------这是终点位置
context.stroke()    ---------这是开始绘制的意思
context.linewidth    ---------线宽度
context.strokeSTyle----------线的颜色
context.linecap='round'----------设置圆形端点（butt---默认值，square方形端点）
context.fillstyle="颜色"-----------填充的什么颜色
context.fill()----------------------填充
这些属性必须在填充或描边前设置
context.beginPath()------------------重置路径、
context.closePath()------------------闭合路径(把线封闭住)
context.fillRect(0,0,200,100)----------绘制矩形
context.arc（圆心x坐标，圆心y坐标，半径r，开始弧度，结束弧度）---------绘制圆形
context.ellipse(椭圆心x坐标，椭圆圆心y坐标，)-------绘制椭圆
context.font="30px '字体'（字体不加的话大小也不会生效）" ------下行
  context.filltext("text",x,y)-------------------绘制文本
canvas渐变
createL inearGradient(x,x1,y1y)------------创建线性渐变
createRadialGradient（x,y,r,x1,y1,r1）------创建一个径向/圆渐变