HTML5 CANVAS

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;