canvas基本操作

1. 创建canvas元素，
   <canvas id="myCanvas" width="200" height="100"></canvas>
2. 使用id获取canvas元素;
   var c = document.getElementById("myCanvas");
3. 创建context对象;
   var cxt = c.getContext("2d");//此处为2d图片
4. 绘制图形

cxt.fillStyle = "red";//定义颜色
  ctx.fillRext(15,15,50,30);//定义矩形的开始的坐标，宽高fillRext(x,y,width,height);
//画线
ctx.moveTo(0,15);//线开始的坐标；
ctx.lineTo(200,100);//线结束的坐标
ctx.stroke();// 执行画线；
//画圆的方法arc(x,y,r,start,stop);
ctx.beginPath();//创建一个路径；
ctx.strokeStyle = "green";//设置圆线的颜色
ctx.arc(100,80, 60, 5*Math*PI);
ctx.stroke();
//制作文本，font-定义字体，fillText(text,x,y)-绘制实心文本，strokeText(text, x, y)-绘制空心文本;
ctx.font = "45px 微软雅黑";//设置字体和大小;
ctx.fillText("Hello Word", 50, 50);
ctx.strokeText("JavaScript", 100,100);
//颜色渐变；createLinearGradient(x, y, x1, y1)-创建线条渐变;
//createRadialGradient(x, y, r, x1, y1, r1)-创建径向/圆渐变;addColorStop()方法指定颜色停止，参数使用坐标来描述，可以0至1；
必须要有2种或者2种以上的停止颜色
var grd = ctx.createLinearGardient(0, 0, 300, 45);//创建线性渐变；
      grd.addColorStop(0, "red");
      grd.addColorStop(1, "green");
      ctx.fillStyle = grd;
      ctx.fillRect(45, 80, 60, 100);
//圆性渐变;
var grd = ctx.createRadialGradient(50, 99, 15, 100, 100, 25);
      grd.addColorStop(0, "yellow");
      grd.addColorStop(1, "red");
      ctx.fillStyle = grd;
      ctx.fillRect(25, 25, 150, 100);

注意：坐标是从左上角（0,0）位置开始

4.较为复杂的构图

var canvas = document.getElementById("test");
    ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.clearRect(0, 0, 200, 200);//擦除（0,0）位置大小位200*200的矩形,擦除是把该区域变成透明;
var path = new Path2D();//创建新路径，Path绘制复杂的路径;
path.arc(75, 75, 50, 0, Math.PI*2, true);//圆周的逆时针方向为true,顺时针为false;
path.moveTo(100, 75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true)//左眼
path.moveTo(64, 64);
path.arc(90, 65, 5, 0, Math.PI*2, true);//右眼
ctx.strokeStyle = "blue";
ctx.stroke(path);
//复杂的文本
cxt.shadowOffsetX = 2;//shadowOffsetX设置或返回形状的阴影的水平距离；
cxt.shadowOffsetY = 2;//shadowOffsetY设置或返回形状阴影的垂直距离;
ctx.shadowBlur = 2;//返回或设置阴影的模糊等级;
ctx.shadowColor = "#555555";
ctx.font = "24px Arial";
ctx.fillStyle = "#333333";
ctx.fillText("fillText('text', x, y,)", 43, 54 );添加文本，和坐标

5.如何图片放在canvas上；

var c = document.getElementById("test");
var ctx = c.getContext("2d");
var img = new Image();//定义图片函数
img.src = "url";//图片地址 
ctx.drawImage(img, 20, 30);//ctx.drawImage(img, x, y, width,height);定义图片在canvas上的坐标，宽高

以上是canvas基本用法，canvas3D功能没有做记录，
总之canvas的画图功能非常强大复杂；