绘制线条

1.绘制方法

设置起点坐标值
moveTo（x,y）
设置终点（折点）坐标值
lineTo（x,y）
2.绘制线条属性
设置线条宽度，默认1px
context.lineWidth = 5;
设置线条端点样式
context.lineCap = "butt/round/square";
butt - 平角
round - 圆角
square - 正方向
设置折点的样式
context.lineJoin = "miter/round/bevel";
miter - 尖角
round - 圆角
bevel - 斜角
miterLimit
- 配合miter使用
  context.lineJoin = "miter"
- 该属性值设置尖角延伸范围
  context.miterLimit = 20;
  代码示例：
  <body>
  <canvas id="canvas" width="400px" height="400px"></canvas>
  </body>
  <script type="text/javascript">
  var context = document.getElementById("canvas").getContext("2d");
  context.beginPath();
  context.moveTo(20,20);
  context.lineTo(100,100);
  context.lineTo(30,10);
  context.lineWidth = 20;
  context.lineCap = "square";
  context.lineJoin = "miter";
  context.miterLimit = 20;
  context.strokeStyle = "red";
  context.stroke();
  </script>

绘制图片

1.绘制图片
drawImage(img,x,y)
img - 当前加载的图片
x和y - 图片左上角的位置
2.平铺图片
var ptn = createPattern(img,type)
img : 平铺的图片
type: 平铺的方式
repeat/no-repeat/repeaet-x/repeat-y
3.切割图片
clip()
代码示例
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
<script type="text/javascript">
var context = document.getElementById("canvas").getContext("2d");
var img = new Image();
img.src = "class.jpg";
img.onload = function(){ //必须要保证图片加载完毕(onload事件)后，再绘制图片
context.drawImage(img,10,10);//按照原图形大小加载
//var ptn = context.createPattern(img,"repeat-x"); //创建平铺对象
//context.fillStyle = ptn; //将平铺对象作为填充颜色
//context.fillRect(0,0,400,400)； //绘制
}
context.beginPath();
//指定路径
context.arc(192/2,168/2,80,0,2*Math.PI);
//裁剪图片
context.clip();
</script>

画布方法

1.缩放
scale(x,y)
x，y,width,height都按照比例进行缩放
x和width: 按照第一个参数的比例缩放
y和height: 按照第二个比例缩放
2.改变参考点
translate(x,y)
context.translate(tx,ty);
context.fillRect(x,y,width,height);
tx和ty改变了矩形的x和y的参考点，也可以改变旋转的中心点
3.旋转
rotate(degrees * Math.PI/180)
degrees:代表想要旋转的角度
正数:顺时针
4.保存当前画布属性、状态
save()
5.恢复画布属性状态
resotre()

饼状图

      <script src="Chart.js"></script>
      var data = {//各种颜色对应的内容，也会改变鼠标放上去以后显示的内容
          labels: [ ],
          datasets: [//数据配置，对应的是一个数组，该数组里可以有多个对象，每个一个对象都是一个圆
                    {
                     data: [600, 50, 100],//每个分类所占的大小
                     backgroundColor: [ "red","black","white"],//每个分类的颜色
                     hoverBackgroundColor:[ ]//鼠标悬停以后该分类的颜色
                    }]
        };
      //创建图表对象，
      //参数1 ：画布对象
      //参数2: 数据和配置信息
      var myPieChart = new Chart(context,{
           type:"pie",
           data:data
    });