canvas學習筆記一

為了研究pixi庫，就順帶從頭到位學習下canvas吧

var webgl = (function

()  
catch
(e) 
})();

//

//繪製路徑 //
context.moveto(20, 20)
context.lineto(30, 30)
context.moveto(100, 150)
context.lineto(150, 200)
context.linewidth = 2context.strokestyle = "red"context.stroke()

//

//繪製路徑 //
context.moveto(20, 20)
context.lineto(30, 30)
context.moveto(100, 150)
context.lineto(150, 200)
context.linewidth = 2context.strokestyle = "red"context.stroke()

//

//繪製路徑 //
context.moveto(20, 20)
context.lineto(30, 30)
context.moveto(100, 150)
context.lineto(150, 200)
context.linewidth = 2context.strokestyle = "red"context.stroke()

ctx.arc(x, y, radius, startangle, endangle, anticlockwise);

arc方法

//

//繪製路徑 //
context.moveto(20, 20)
context.lineto(30, 30)
context.moveto(100, 150)
context.lineto(150, 200)
context.linewidth = 2context.strokestyle = "red"context.stroke()

createlineargradient方法的引數是(x1, y1, x2, y2)，其中x1和y1是起點座標，x2和y2是終點座標。通過不同的座標值，可以生成從上至下、從左到右的漸變等等。

//

/////
漸變色 //
/////
var mygradient = context.createlineargradient(0, 0, 0, 60); 
mygradient.addcolorstop(0, "#bababa");
mygradient.addcolorstop(1, "#636363");
context.fillstyle =mygradient;
context.fillrect(10,250,200,100);

/

//漸變色 ///
var mygradient = context.createlineargradient(0, 0, 0, 60
);     mygradient.addcolorstop(
0, "
#bababa");
mygradient.addcolorstop(
1, "
#636363");
context.fillstyle =mygradient;
context.fillrect(
10,250,200,100);

canvas學習筆記一

html5新增的canvas標籤可用來繪圖。今天開始學習了一點繪製基礎。一 繪製三角形 1 canvas繪圖是基於狀態的繪圖，也就是說應該先設定繪圖狀態，再呼叫函式進行繪製 2 座標系 canvas的左上角為原點，向右為x軸正方向，向下為y軸正方向 繪圖步驟 1 定義標籤 當前瀏覽器不支援canva...

Canvas 學習筆記（一）

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

canvas學習筆記（一）

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