canvas學習筆記一

html5新增的canvas標籤可用來繪圖。今天開始學習了一點繪製基礎。

一、繪製三角形

1）canvas繪圖是基於狀態的繪圖，也就是說應該先設定繪圖狀態，再呼叫函式進行繪製

2）座標系：canvas的左上角為原點，向右為x軸正方向，向下為y軸正方向 

繪圖步驟：

1）定義標籤

當前瀏覽器不支援canvas，換個瀏覽器試試   //向下降級，如果瀏覽器支援，會忽略標籤裡的文字

//初始化

var canvas=document.getelementbyid('canvas1');
canvas.width=1024;
canvas.height=500;
//獲取繪圖上下文環境，是進行繪製所需的介面
var context=canvas.getcontext('2d');

3）設定繪圖狀態

context.moveto(50,50);

context.lineto(50,500);
context.lineto(500,50);
context.lineto(50,50);   
context.linewidth=5;
context.strokestyle='red'; //邊框顏色

context.stroke();  //繪製，用線來繪製輪廓

二、簡單的繪製了乙個三角形，那如果想在乙個canvas裡邊繪製兩個圖形怎麼辦勒？

太簡單了，在重新重複一下上面的操作就好了嘛！

context.moveto(50,50);

context.lineto(50,500);
context.lineto(500,50);
context.lineto(50,50); 
context.linewidth=5;
context.strokestyle='red'; //邊框顏色
context.stroke(); //繪製
//直線
context.moveto(100,100);
context.lineto(500,500);

context.strokestyle='blue';

context.stroke();

但是效果圖是？

誒，這是怎麼回事勒？怎麼兩個都是藍色，而且線寬都是5？

這裡就要回到我們最開始說的canva是基於狀態繪圖了，再結束了第一次繪圖之後，執行第二次繪圖時，會將頁面上的context

設定的狀態都執行一次，所以第二次繪圖會把第乙個三角形覆蓋，，並且使用了邊框顏色也會blue替換了， 而之前的線寬狀態也會繪製到直線處.。

如何解決這個問題，使得兩次繪圖互不影響勒？

需要用到函式：

beginpath() 新建一條路徑

closepath() 閉合這條路徑

閉合路徑之後圖形繪製命令會指向這條路徑

context.beginpath();

context.moveto(50,50);
context.lineto(50,500);
context.lineto(500,50);
context.lineto(50,50);
context.closepath(); 
context.linewidth=5;
context.strokestyle='red'; //邊框顏色
context.stroke(); //繪製 
context.beginpath();
context.moveto(100,100);
context.lineto(500,500);
context.closepath(); 
context.strokestyle='blue'; 
context.stroke(); //繪製，通過線條來繪製圖形輪廓

三、填充圖形

context.fillstyle指定圖形填充顏色，   context.fill()執行實心繪圖

context.beginpath();

context.moveto(50,50);
context.lineto(50,500);
context.lineto(500,50);
context.lineto(50,50);
context.closepath(); 
context.linewidth=5;
context.strokestyle='red'; //邊框顏色
context.stroke(); //繪製 
context.fillstyle='green';
context.fill();

感覺**不對勒？三角形的邊框線寬沒有5。

把fill和stroke的命令調整一下順序即可。

聽課來自慕課網

Canvas 學習筆記（一）

一直沒有系統的去學習一下canvas，都是在用到的時候一邊google一邊使用，最近工作上的事情告一段落，就決定跟著mdn學習一下canvas。在學習之前，首先了解一下canvas的背景知識。以下內容引用自 mdn canvas，中文翻譯為畫布，canvas的出現為web開發者帶了新一輪的高潮，利用...

canvas學習筆記一

為了研究pixi庫，就順帶從頭到位學習下canvas吧 var webgl function catch e getcontext方法指定引數2d，表示該canvas物件用於生成2d圖案 即平面圖案 如果引數是3d，就表示用於生成3d影象 即立體圖案 這部分實際上單獨叫做webgl api 繪製路徑...

canvas學習筆記（一）

canvas是html5的新標籤，一般稱為 畫布 通過js 在這個 畫布 上製作各種各樣的圖形 絢麗的效果等等。現在開始一步一步了解canvas 首先，需要在html中新增乙個,一般來說，我們可以在canvas標籤內新增其他元素，對於不相容canvas的瀏覽器，就會把canvas標籤內當元素呈現出來...