Javascript學習筆記 Canvas

canvas是html5新增的元件，可以用來繪製各種圖表、動畫等。由於瀏覽器對html5標準支援不一致，通常在使用canvas前，用canvas.getcontext來測試瀏覽器是否支援canvas：

你的瀏覽器不支援canvas
var canvas = document.getelementbyid('test-canvas');
if (canvas.getcontext) else

var ctx = canvas.getcontext('2d');

html5還有乙個webgl規範，允許在canvas中繪製3d圖形：

gl = canvas.getcontext("webgl");

繪製圖形

在繪製前，我們先了解一下canvas的座標系統canvas-xy。canvas的座標以左上角為原點，水平向右為x軸，垂直向下為y軸，以畫素為單位，所以每個點都是非負整數。

canvasrenderingcontext2d物件有若干方法來繪製圖形：

var canvas = document.getelementbyid('test-shape-canvas'),

ctx = canvas.getcontext('2d');
ctx.clearrect(0, 0, 200, 200); // 擦除(0,0)位置大小為200x200的矩形，擦除的意思是把該區域變為透明
ctx.fillstyle = '#dddddd'; // 設定顏色
ctx.fillrect(10, 10, 130, 130); // 把(10,10)位置大小為130x130的矩形塗色
// 利用path繪製複雜路徑:
var path=new path2d();
path.arc(75, 75, 50, 0, math.pi*2, true);
path.moveto(110,75);
path.arc(75, 75, 35, 0, math.pi, false);
path.moveto(65, 65);
path.arc(60, 65, 5, 0, math.pi*2, true);
path.moveto(95, 65);
path.arc(90, 65, 5, 0, math.pi*2, true);
ctx.strokestyle = '#0000ff';
ctx.stroke(path);

繪製文字就是在指定的位置輸出文字，可以設定文字的字型、樣式、陰影等，與css完全一致：

var canvas = document.getelementbyid('test-text-canvas'),

ctx = canvas.getcontext('2d');
ctx.clearrect(0, 0, canvas.width, canvas.height);
ctx.shadowoffsetx = 2;
ctx.shadowoffsety = 2;
ctx.shadowblur = 2;
ctx.shadowcolor = '#666666';
ctx.font = '24px arial';
ctx.fillstyle = '#333333';
ctx.filltext('帶陰影的文字', 20, 40);

Javascript 學習筆記

如果在生成的html裡面有事件需要傳遞帶特殊字元的引數，處理如下 singletext 輸入 1.singletext value.escapehtml 為 將html編碼 2.singletext value.escapehtml inspect 為 3.在 jsdebugtext innerht...

javascript學習筆記

視窗操作 1改變視窗的位置 window.location 2視窗的歷史操作 previous 3建立新的視窗 window.open url 視窗名稱 視窗特徵字元 細節 不能換行寫 視窗特徵 width,height,yes,no munubar,status,scrollbars,resiza...

javaScript學習筆記

2018 12 26 標題 var num1 10 var num2 0 var result num1 num2 console.log result infinity 表示超出了js的數值範圍 類似高數里的整數除以無窮小的數，得到無窮大的結果。var num1 a var num2 3 或其它n...