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();

效果圖：

html5 Canvas基礎

html5 Canvas基礎

JS裏用來表示時間和日期——Date

若干css樣式

css選擇器

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結