1 <canvas>标签有三个属性，id，width，height，必须。
2
var canvas = document.getElementById("some_id"); var context = canvas.getContext("2d"); // 找起点 context.moveTo(10, 20); // 找终点和形状 context.lineTo(100, 200); // 实际画到画布上去 context.stroke();
3 影响线的三个属性，lineWidth，strokeStyle，lineCap
lineWidth: 线的宽度；
context.lineWidth = 5px;
strokeStyle: 线的颜色；
context.strokeStyle = "#1f1f1f"; context.strokeStyle = "red"; context.strokeStyle = "rgb(100, 20, 30)";
lineCap： 线的头部形状；
context.lineCap = "butt"; // 默认，方头 context.lineCap = "round"; // 圆头 context.lineCap = "square"; // 方头，比butt多半个线的宽度
4 beginPath();
该方法在决定绘画下一条线时，且线的属性发生变化的时候，调用。
不然的话，会把之前画的线用新制定的线的属性重新绘画一次。
5 closePath();
用来把画笔与绘画的起点连接起来，形成一个封闭的图形。所以说和stroke注定是不能同时出现的。
也只有封闭了之后，才可能填充颜色。context.fillStyle("some color"); context.fill();
6 context.fillStyle 用来指定一个封闭图形的填充色
context.fillStyle = "blue"; // 设定填充色为蓝色；
context.fill(); // 开始填充
这样一来有一个问题，会把原来图形的边线样式覆盖掉。
所以一般先填充封闭图形，然后再绘制封闭图形的边缘。
7 context.stroke();
这个方法的作用就是用来描边。。。
8 绘制矩形
// 填充矩形 context.fillRect(x, y, width, height); // 绘制矩形 context.strokeRect(x, y, width, height);
fillRect的填充色由fillStyle指定；
strokeRect的边框属性由lineWidth和strokeStyle指定；
context.rect(x, y, width, height);
这也是花方块呢。。。。
9 绘制弧形
context.arc(x, y, radius, startAngle, endAngle);
context.stroke();
x,y指定vanvas上的坐标；
radius指定圆弧的半径；
startAngle，endAngle指定开始位置和结束位置。
从开始位置开始，顺时针画弧到结束位置。
另外，closePath会把弧的两端用一条直线连接起来。
10 贝塞尔曲线，好吧，我承认我学不明白。
11 变换： 变换的不是方法，而是思想
平移变换： translate(x, y); 让canvas沿x方向移动xPX，沿y方向移动yPX。默认的坐标位置是(0, 0)。
已经提供的方法，如rect(), strokeRect()这些方法是一个设计好的，画一个独立的图形。
但是，arc()方法并不是画完一个完整的图形，所以说当确定画完了之后，调用stroke()方法；准备画下一个图形了，需要调用beginPath()方法，然后继续。。。
context.beginPath(); context.arc(xPosition, yPosition, radius, startAngle, endAngle); context.stroke(); context.translate(120, 0); context.beginPath(); context.arc(xPosition, yPosition, radius, startAngle, endAngle); context.stroke(); context.translate(120, 0); context.beginPath(); context.arc(xPosition, yPosition, radius, startAngle, endAngle); context.stroke();
缩放变换： scale(a, b);
a用来设定x轴方向上的变化，1:100%； 2:200%； 0.5：50%...
b用来设定y轴方向上的变化，1:100%； 2:200%； 0.5：50%...
影响的有： x，y坐标； 线宽度，半径等等。
旋转变换： rotate(angle);
angle，顺时针旋转的角度。一圈是2*Math.PI。
如果转一圈，画10个图形，那么每一次旋转2*Math.PI/9。
目前尚不知道，为什么moveTo(500, 500)和translate(500, 500)有啥区别。。。
12 保存和恢复变换之前的canvas的状态
context.save(); // 相当于设定一个savePoint。它会记住当前变换的状态。
context.restore(); // 返回之前的savePoint指定的状态。
13 透明
a:
context.fileStyle = "rgba(red, green, blue, alpha)";
前三个参数的最大值为255，alpha的值介于1和0之间，0使该图形完全不可见，1使该图形完全可见。
b:
context.globalAlpha = 0.5;
这样一来，后面所有的填充色，边框色都变成了半透明的了，直到重新修改globalAlpha的值为止。
14 清除一个canvas
context.clearRect(0, 0, canvas.width, canvas.height);
15 javascript事件处理函数有一个参数event
event.pageX: 当前鼠标所在页面X轴上的位置；
event.pageY: 当前鼠标所在页面Y轴上的位置；
16
canvas.onmousedown = functionOne;
canvas.onmouseup = functionTwo;
canvas.onmouseout = functionThree; // 鼠标不在canvas上面了；
canvas.onmousemove = functionFour; // 鼠标在canvas上移动；
17 保存画布图像
var dataUrl = canvas.toDataURL(); // 这里是canvas对象，不是context对象~
var dataUrl = canvas.toDataURL("image/jpeg"); // 默认的是PNG格式的图片，通过传递参数可以修改。。。。
dataUrl能够干什么？
1 window.open(dataUrl);
2 window.location = dataUrl;
3 document.getElementById("pic_id").src = dataUrl;