html5 Canvas基础

这两天接触了Canvas标签，对所学的东西做了一个总结，分享给大家，有不对的地方，请指出。
Canvas，画布是一个很强大的标签，它可以实现的好多炫酷的效果，在这只写一些基础：
首先，canvas是一个行标签，他的宽高都是在书写标签时，直接写在属性里的，如果用css样式设置宽高，会令画布拉伸，造成图像失真。Canvas是的背景色默认是透明色，为了能够看到Canvas的位置，可以在css中加一个border或者box-shadow，那样我们就可以知道它所在的位置了。

---

html标签

<!--注：默认宽高300，150，css中设置宽高会在默认基础上拉伸，会引起失真，所以在属性中设置--><canvas id="myCanvas" width="500" height="500"></canvas>

---

坐标系
在学习Canvas的js部分之前，在重申一下坐标系的问题;我们在学习css的2d与3d变换时应该知道；在我们的浏览器中有一个虚拟的坐标系，它是如下图所示的，在进行图形变换时，坐标系是跟随图形的改变而改变的。
在Canvas中坐标系的原点在Canvas画布的左上角位置：和下图一样，水平向右代表x轴正方向，垂直向下是y轴正方向，不过Canvas到目前为止还没有z轴，因为它还不能进行3d变换。
Canvas的坐标系是可以移动和旋转的；在后面我们会提到：

---

在js中首先要获取canvas标签，还有getContext(“2d”)：获取上下文，这样我们感觉到很别扭，我们可以理解为canvas画布的画笔。

---

js中获取Canvas标签

/*只要运用canvas标签吗，首先必须先书写以下代码*///获取Canvas标签对象var myCanvas = document.getElementById("myCanvas");//获取canvas标签内部自带的画笔，getContext：获取上下文var ctx = myCanvas.getContext("2d");

Canvas在绘制过程中有两种绘图方式：1.轨迹。 2.图形
注意：我感觉Canvas标签在书写代码时顺序是非常苛刻的，在书写中注意代码的顺序：beginPath()代表一个绘制的开始，每进行一次绘制时，最好写先写一遍这行代码：否则，再次绘制时样式会影响第一次绘制时设置的样式；

---

绘制线段：

ctx.beginPath();    //开始绘制轨迹ctx.moveTo(20, 20);    //设置线段绘制的起始点。可以理解为将画笔移动到起始的位置ctx.lineTo(20, 200);    //设置线段的终止位置。可以理解为画线到的位置ctx.lineWidth = 30;    //设置线段的宽度ctx.strokeStyle = "red";   //设置颜色ctx.stroke();   //以轨迹方式绘制

效果图：

---

绘制渐变色
渐变色的绘制有两种方式：1.线性渐变 2.径向渐变
这里暂时先说一下线性渐变，径向渐变在绘制圆形的时候在涉及：

ctx.beginPath();    //开始绘制轨迹ctx.moveTo(20, 20);    //设置线段绘制的起始点。可以理解为将画笔移动到起始的位置ctx.lineTo(20, 200);    //设置线段的终止位置。可以理解为画线到的位置ctx.lineTo(200, 20);//ctx.lineTo(20, 20);  //因为在绘制一个三角形，当出现ctx.closePath();时，代表使绘制闭合的轨迹，所以这行代码没有必要了 ctx.lineWidth = 30;    //设置宽度//绘制渐变色/*createLinearGradient();四个参数分别对应的就开始渐变的位置坐标和结束渐变的位置坐标，四个参数决定整个渐变的方向。addColorStop(); 参数1: 代表对应颜色的位置值[0, 1]; 参数2对应的是一个具体的颜色，是一个字符串类型。 */var grans = ctx.createLinearGradient(20, 200, 200, 20);    //设置起始点和终止点的坐标，grans.addColorStop(0, "red");    //渐变对象：渐变起始位置和渐变颜色grans.addColorStop(0.5, "yellow");grans.addColorStop(0.9, "green");ctx.strokeStyle = grans;    //设置颜色ctx.lineCap = "square";    //线段的两端的样式：square：矩形； round：圆形； butt：默认ctx.closePath();    //使整个轨迹的绘制形成一个封闭的轨迹ctx.lineJoin = "bevel";   //两条线的相交样式： bevel：斜角；round：圆角；miter：默认尖角ctx.stroke();   //开始绘制线段

效果图：

---

绘制矩形
ctx.strokeStyle; 与ctx.strokeRect();和ctx.fillStyle;与ctx.fillRect();都是成对出现的，不可交替使用，颜色不设置时默认为黑色，strokeRect()；绘制矩形的外边框，即轨迹
fillRect(); 绘制矩形的内部区域，即图形

var grans1 = ctx.createLinearGradient(200, 200, 300, 300);ctx.lineWidth = 30;grans1.addColorStop(0, "red");grans1.addColorStop(0.5, "blue");grans1.addColorStop(1, "yellow");//      ctx.strokeStyle = grans1;//      ctx.strokeRect(200, 200, 100, 100);    //开始绘制起始地点坐标和宽高ctx.fillStyle = grans1;ctx.fillRect(100, 100, 300, 300);    //开始绘制矩形: 开始绘制起始地点坐标和宽高/*strokeRect();绘制矩形的外边框fillRect(); 绘制矩形的内部区域*/      

效果图：

---

绘制园形与径向渐变

ctx.beginPath();/*这是绘制圆形的主要部分：ctx.arc()有七个参数：参数1，2：圆心位置的横纵坐标；参数3：圆的半径；参数4，5：起点与终点的弧度（Math.PI相当于数学的π，也就是：180度对应的弧度，通常绘制圆时给起点的弧度为0）；参数的6：可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。默认为false*/ctx.arc(250, 250, 200, 0, 2 * Math.PI, false);/*径向渐变：原理就是定义两个圆：有小圆向大圆的方向进行渐变。故ctx.createRadialGradient()中有6个参数：参数1，2：代表内圆的圆心坐标；参数3：代表内圆的半径（通常设置为0）；参数4，5代表外圆的圆心坐标；参数6：代表外圆的半径；*/var grans3 = ctx.createRadialGradient(250, 250, 0, 250, 250, 200);grans3.addColorStop(0, "red");grans3.addColorStop(0.5, "blue");grans3.addColorStop(1, "green");ctx.lineTo(250, 250)ctx.closePath();ctx.fillStyle = grans3;ctx.fill();

效果图：

---

Canvas绘制文本
在绘制文本的时候可以用渐变色；

var grans4 = ctx.createLinearGradient(200, 0, 400, 0);grans4.addColorStop(0, "red");grans4.addColorStop(0.4, "yellow");grans4.addColorStop(0.8, "blue");ctx.font = "50px stKaiTi"ctx.fillStyle = grans4;//设置文字的阴影ctx.shadowOffsetX = 5;    //设置x方向的偏移ctx.shadowOffsetY = 5;    //设置y方向的便宜ctx.shadowColor = "aqua";     //设置偏移的颜色ctx.shadowBlur = 10;    //模糊程度ctx.fillText("孙行者", 200, 200, 200);

效果图：

---

Canvas变换：平移， 缩放， 旋转
这是未设置任何变换之前的代码与效果：

    ctx.fillStyle = "red";    ctx.fillRect(40, 40, 100, 100);    ctx.fillStyle = "blue";    ctx.fillRect(0, 0, 100, 100);

效果图：

这是设置了平移变换之后的代码与效果图：

ctx.fillStyle = "red";ctx.fillRect(40, 40, 100, 100);//平移操作只会影响后面图形的位置，但是不会影响之前的图形位置ctx.translate(70, 70);    //平移分别设置x，y方向的平量ctx.fillStyle = "blue";ctx.fillRect(0, 0, 100, 100);

效果图：

这是设置了平移，旋转变换的代码与效果图：

ctx.fillStyle = "red";ctx.fillRect(40, 40, 100, 100);//平移操作只会影响后面图形的位置，但是不会影响之前的图形位置ctx.translate(70, 70);    //平移分别设置x，y方向的平量//      旋转是对坐标系的旋转ctx.rotate(Math.PI / 4);    //旋转：设置对应的旋转角度，注意是弧度ctx.fillStyle = "blue";ctx.fillRect(0, 0, 100, 100);

效果图：

这是设置了平移，旋转， 缩放后的代码与效果图

        var centerX = 10, centerY = 10;        var timer = setInterval(function(){            ctx.beginPath();            //清除画布            ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);    //用来清除Canvas标签上面的所有内容            ctx.arc(centerX, centerY, 10, 0, Math.PI*2, false);            ctx.closePath();            ctx.fillStyle = "red";            ctx.fill();            centerX += 1;            centerY += 1;        }, 10);

效果图：

---

图形移动
图形的移动的其实是不断清空画布，并且重新再下一位置绘制图形的过程，只不过频率太快使我们看到的效果就好像动画一样；

var centerX = 10, centerY = 10;var timer = setInterval(function(){    ctx.beginPath();    //清除画布：ctx.clearRect()中有4个参数：参数1，2：代表清除的起点坐标：参数3，4代表清除的终点坐标；两个点的坐标公共一个矩形；这个矩形范围内的所有内容会全部清空。    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);    //用来清除Canvas标签上面的所有内容    ctx.arc(centerX, centerY, 10, 0, Math.PI*2, false);    ctx.closePath();    ctx.fillStyle = "red";    ctx.fill();    centerX += 1;    centerY += 1;}, 10);

效果图：（图片中的小球应该是运动的）：

贝塞尔曲线
关于贝塞尔曲线的原理，请看：
http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html

ctx.beginPath();ctx.moveTo(20, 200);//二次贝塞尔曲线ctx.quadraticCurveTo(110, 20, 200, 200);   //中点坐标和终点坐标ctx.strokeStyle = "blue";ctx.stroke();

效果图：

ctx.beginPath();ctx.moveTo(20, 200);//三次贝塞尔曲线ctx.bezierCurveTo(80,20, 140,400, 200,200);    //前两个点的x，y坐标，终点的x，y坐标ctx.strokeStyle = "blue";ctx.stroke();

效果图：