canvas是我們?cè)谌粘Ｖ斜容^常用的一個(gè)工具，但是它的屬性又特別多，今天小編我把一些日常中經(jīng)常用到的屬性總結(jié)了一些探颈，方便水友們翻閱.........
- ctx.beginPath();
新開始一條路徑，繪制方法被指向新路徑 - ctx.moveTo(x, y);
描述起點(diǎn)坐標(biāo) - ctx.lineTo(x, y);
描述終點(diǎn)坐標(biāo) - ctx.closePath();
閉合當(dāng)前路徑，讓繪制命令重新指向上下文 - ctx.fill();
通過(guò)填充路徑的內(nèi)容區(qū)域生成實(shí)心圖形 - ctx.stroke();
通過(guò)線條來(lái)繪制圖像輪廓 - ctx.fillStyle();
填充的顏色 - ctx.strokeStyle();
描邊的顏色 - ctx.fillText(text, x, y [, maxWidth]);
- 繪制填充文本
- text文本
- x,y指定的坐標(biāo)
- maxWidth最大寬度桨踪，可選
- ctx.strokeText(text, x, y [, maxWidth]);
- 繪制文本邊框
- text文本
- x,y指定坐標(biāo)
- maxWidth最大寬度，可選
- ctx.textAlign(文本對(duì)齊選項(xiàng)): start|end|left|right|center
- ctx.textBaseline(基線對(duì)齊選項(xiàng))：top|hanging|middle|alphabetic|ideographic|bottom
- ctx.fillRect(x,y,width,height);
- 參數(shù)同上芹啥，繪制填充矩形
- ctx.strokeRect(x, y. width, height);
- 參數(shù)同上锻离，繪制邊框矩形
- ctx.rect(x, y, width, height);
- 繪制矩形x,y為繪制的起點(diǎn)坐標(biāo)，width和height為要繪制矩形的寬高墓怀，無(wú)需加px
- 需要配和stroke繪制帶邊框的矩形汽纠，或者fill繪制實(shí)心矩形
- ctx.font
- 文本樣式
- 和css設(shè)置字體相似，復(fù)合設(shè)置
- 例如：context.font='100px sans-serif';
- ctx.lineWidth
線條寬度傀履，以像素計(jì)算虱朵，沒(méi)有px - ctx.arc(x,y,r,sangle,eangle,counterclockwise);
- 圓弧
- x,y為繪制圓的圓心坐標(biāo)
- r為圓的半徑
- sangle,eangle為圓的起始角度和結(jié)束角度
- counterclockwise，可選參數(shù)，表示繪制圓是順時(shí)針還是逆時(shí)針碴犬，true為逆時(shí)針
- ctx. arcTo(x1,y1,x2,y2,r);
- 畫圓角絮宁，一般兩個(gè)直線相交的地方，用此方法繪制成圓弧服协，x1,y1指圓弧開始的x坐標(biāo)和y坐標(biāo)绍昂，x2,y2指圓弧結(jié)束的x和y坐標(biāo)，r指半徑
- ctx.save();
保存狀態(tài)偿荷，保存在棧中窘游，類似于數(shù)組的push - ctx.restore();
恢復(fù)狀態(tài)，類似于數(shù)組的pop - ctx.clip();
裁剪路徑- 把一個(gè)路徑之外的內(nèi)容進(jìn)行裁剪遭顶，只保留路徑本身內(nèi)部的內(nèi)容
- ctx.drawImage();
繪制圖片- drawImage(imgElement,x,y,width,height)
- x,y繪制圖片的起始坐標(biāo)
- imgElement 要繪制的圖片元素,或者為一個(gè)canvas的引用
- width,height,設(shè)置圖片的寬高
- ctx.clearRect(x,y,width,height);
- 清除指定區(qū)域矩形,會(huì)留下一塊白色矩形區(qū)域
- ctx.shadowBlur
- 陰影模糊級(jí)別
- ctx.shadowColor
陰影顏色 - ctx.shadowOffsetX
- 陰影水平偏移量
- ctx.shadowOffsetY
- 陰影垂直偏移量
ctx.isPonintInPath
用來(lái)檢測(cè)是否在路徑內(nèi)
isPointInPath()方法
定義與用法： isPointInPath()方法返回true张峰，如果給定的點(diǎn)的坐標(biāo)位于路徑之內(nèi)的話（包括路徑的邊）,否則返回 false。
語(yǔ)法： context.isPointInPath(x,y);//其中x,y分別是給定點(diǎn)的橫棒旗、縱坐標(biāo)
isPointInStroke()
是 Canvas 2D API 用于檢測(cè)某點(diǎn)是否在路徑的描邊線上的方法喘批。返回值是一個(gè)布爾值，當(dāng)這個(gè)點(diǎn)在路徑的描邊線上铣揉，則返回true饶深，否則返回false。-
ctx. translate(x, y);
- 移動(dòng)原點(diǎn)
- 將一個(gè)坐標(biāo)原點(diǎn)向x,y正方向移動(dòng)逛拱，如果坐標(biāo)原點(diǎn)不在原來(lái)的位置敌厘，則以新的位置加上要移動(dòng)的位置
-
ctx.rotate(x, y);
- 旋轉(zhuǎn)
- 凡是牽扯到度數(shù)，都用公式deg乘以Math.PI/180來(lái)計(jì)算
-
ctx.scale(x, y);
- 縮放x軸和y軸分別設(shè)置縮放
ctx.globalAlpha()
全局的透明度-
ctx.lineCap
- 設(shè)置線條兩端結(jié)束位置的形狀
- butt默認(rèn)
- round圓形帽
- square正方形
