canvas是html5中新出的乙個元素，開發者可以通過js指令碼動態繪製影象。
#1. 建立canvas畫布
在頁面中建立canvas標籤,並設定其id和寬高 (不要通過css設定,會有bug)
id="mycanvas" width="500" height="500">
#2. 設定畫布
// 1. 通過js設定畫布寬高
var canvas = document.getelementbyid('mycanvas');
canvas.width = 800;
canvas.height = 600;
// 2. 獲取上下文物件 （可以理解為獲取畫筆）
var cxt = canvas.getcontext('2d');
方法描述
beginpath()
開啟路徑
moveto(x,y)
起始點lineto(x,y)
下乙個點
closepath()
閉合路徑
stroke()
描邊繪製
fill()
填充繪製
屬性描述
strokestyle
描邊顏色
fillstyle
填充顏色
linewidth
粗細linecap
設定或返回線條端點樣式
butt 預設,平直邊緣
round 圓形線帽
square 正方形線帽
linejoin
設定或返回兩條相交線的拐角
miter 預設,尖角
round 圓角
bevel 斜角
方法描述
rect(x,y,width,height)
需配合stroke()或fill()方法繪製矩形
fillrect(x,y,width,height)
繪製填充矩形
strokerect(x,y,width,height)
繪製矩形邊框
clearrect(x,y,width,height)
清除指定矩形區域
==弧線==arc(x,y,r,sangle,eangle,counterclockwise)
引數描述
x,y圓心的座標
r圓的半徑
sangle
起始弧度
eangle
結束弧度
弧度 = math.pi/180*角度
counterclockwise
可選。true逆時針,false順時針
==兩切線之間的弧線==arcto(x1,y1,x2,y2,r)
引數描述
x1,y1
弧的起點座標
x2,y2
弧的終點座標r半徑
==繪製扇形==
cxt.moveto(x,y);
cxt.arc(x,y...);
cxt.closepath();
屬性描述
font
設定或返回文字的當前字型屬性
textalign
設定或返回文字的對齊方式
textbaseline
設定或返回文字的基線
方法描述
filltext(text,x,y)
繪製填充文字
stroketext()
繪製描邊文字
drawimage(img,x,y,width,height)
引數描述
imgx
繪製的起始位置x座標
y繪製的起始位置y座標
width
可選。寬度
height
可選。高度
方法描述
scale()
縮放當前繪圖至更大或更小
rotate()
旋轉當前繪圖
translate()
重新設定畫布原點
transform()
替換繪圖的當前轉換矩陣
settransform()
將當前轉換重置為單位矩陣。然後執行 transform()
#線性漸變
var lg = ctx.createlineargradient(x, y, x1, y1);
lg.addcolorstop(漸變位置,顏色);
ctx.strokestyle = lg;
#徑向漸變
var rg = cxt.createradialgradient(起始圓x, 起始圓y, 半徑, 結束圓x, 結束圓y, 半徑);
rg.addcolorstop(漸變位置,顏色);
ctx.strokestyle = rg;
ctx.globalcompositeoperation =
'source-over' //後畫覆蓋先畫
'destination-out' //後畫清空先畫
cvs.todataurl();
移動端基礎
1.視口 視口就是瀏覽器顯示頁面內容的螢幕區域 視口分為布局視口 視覺視口 理想視口 移動端布局想要的是理想視口就是手機螢幕有多寬，我們的布局視口就 有多寬 通過給移動端頁面增加meta視口標籤 2.meta視口標籤 viewport 視口標籤 content width device width ...
移動端基礎
移動端瀏覽器我們主要針對webkit核心進行相容 現在移動端碎片化比較嚴重，解析度和螢幕尺寸大小不一 1 移動端除錯方法 視口 viewport 就是瀏覽器顯示頁面內容的螢幕區域。視口可分為布局視口 視覺視口和理想視口 2.1布局視口 layout viewport 標準寫法 屬性解釋說明 widt...
移動端基礎
移動端瀏覽器我們主要針對webkit核心進行相容 現在移動端碎片化比較嚴重，解析度和螢幕尺寸大小不一 視口 viewport 就是瀏覽器顯示頁面內容的螢幕區域。視口可分為布局視口 視覺視口和理想視口 屬性解釋說明 width 寬度設定的是viewport寬度，可以設定device width 寬度是...