Canvas常用api

1、繪制矩形 context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)

2、清除矩形區(qū)域 context.clearRect(x,y,width,height)

3匈子、圓弧 context.arc(x,y,r,startAngle,endAngle,anticlockwise)

4掀亥、路徑 context.beginPath()
context.closePath()

5涵亏、繪制線段 context.moveTo(x,y)
context.lineTo(x,y)

6、繪制貝塞爾曲線 context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
繪制二次樣條曲線 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

7发乔、線性漸變 var lg = context.createLinearGradient(xStart,yStart,xEnd,yEnd)
線性漸變顏色 lg = addColorStop(offset,color)

8、徑向漸變 var rg = context.createRadialGradient(xStart,yStart,xEnd,yEnd,radiusEnd)
徑向漸變顏色 rg.addColorStop(offset,color)

9雪猪、圖形變形
平移 context.translate(x,y)
縮放 context.scale(x,y)
旋轉(zhuǎn) context.rotate(angle)

10栏尚、矩陣變換 context.transform(m11,m12,m21,m22,dx,dy)

11、圖形組合 context.globalCompositeOperation = type
type :
source-over(默認)
destination-over
source-in
destination-in
source-out
destination-out
source-atop
destination-atop
lighter
xor
copy

12只恨、給圖形繪制陰影
context.shadowOffsetX
context.shadowOffsetY
context.shadowColor
context.shadowBlur

13译仗、繪制圖像
繪圖:context.drawImage
圖像平鋪:context.createPattern(image,type)
圖像裁剪:context.clip()
像素處理: var imagedata = context.getImageData(sx,sy,sw,sh)
設置像素顏色:context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

14、繪制文字
填充文字: context.fillText(text,x,y)
繪制文字輪廓:context.strokeText(text,x,y)

15坤次、保存和恢復狀態(tài)
保存:context.save()
恢復:context.restore()

16古劲、保存文件 canvas.toDataURL(MIME)

17、結合setInterval 制作動畫

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末缰猴,一起剝皮案震驚了整個濱河市产艾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌滑绒,老刑警劉巖闷堡,帶你破解...
    沈念sama閱讀 221,273評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異疑故,居然都是意外死亡杠览,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評論 3 398
  • 文/潘曉璐 我一進店門纵势,熙熙樓的掌柜王于貴愁眉苦臉地迎上來踱阿,“玉大人管钳,你說我怎么就攤上這事∪砩啵” “怎么了才漆?”我有些...
    開封第一講書人閱讀 167,709評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長佛点。 經(jīng)常有香客問我醇滥,道長,這世上最難降的妖魔是什么超营? 我笑而不...
    開封第一講書人閱讀 59,520評論 1 296
  • 正文 為了忘掉前任鸳玩,我火速辦了婚禮,結果婚禮上演闭,老公的妹妹穿的比我還像新娘不跟。我一直安慰自己,他們只是感情好船响,可當我...
    茶點故事閱讀 68,515評論 6 397
  • 文/花漫 我一把揭開白布躬拢。 她就那樣靜靜地躺著,像睡著了一般见间。 火紅的嫁衣襯著肌膚如雪聊闯。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,158評論 1 308
  • 那天米诉,我揣著相機與錄音菱蔬,去河邊找鬼。 笑死史侣,一個胖子當著我的面吹牛拴泌,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播惊橱,決...
    沈念sama閱讀 40,755評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼蚪腐,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了税朴?” 一聲冷哼從身側(cè)響起回季,我...
    開封第一講書人閱讀 39,660評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎正林,沒想到半個月后泡一,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,203評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡觅廓,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,287評論 3 340
  • 正文 我和宋清朗相戀三年鼻忠,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片杈绸。...
    茶點故事閱讀 40,427評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡帖蔓,死狀恐怖矮瘟,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情塑娇,我是刑警寧澤芥永,帶...
    沈念sama閱讀 36,122評論 5 349
  • 正文 年R本政府宣布,位于F島的核電站钝吮,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏板辽。R本人自食惡果不足惜奇瘦,卻給世界環(huán)境...
    茶點故事閱讀 41,801評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望劲弦。 院中可真熱鬧耳标,春花似錦、人聲如沸邑跪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽画畅。三九已至砸琅,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間轴踱,已是汗流浹背症脂。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留淫僻,地道東北人诱篷。 一個月前我還...
    沈念sama閱讀 48,808評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像雳灵,于是被迫代替她去往敵國和親棕所。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,440評論 2 359

推薦閱讀更多精彩內(nèi)容

  • getContext 獲取canvas繪圖的上下文環(huán)境之后在繪圖環(huán)境上有以下APIlineJoin 線頭線尾的形狀...
    infi_閱讀 1,440評論 0 0
  • canvas元素的基礎知識 在頁面上放置一個canvas元素悯辙,就相當于在頁面上放置了一塊畫布琳省,可以在其中進行圖形的...
    oWSQo閱讀 10,310評論 0 19
  • ??HTML5 添加的最受歡迎的功能就是 元素岛啸。這個元素負責在頁面中設定一個區(qū)域,然后就可以通過 JavaScri...
    霜天曉閱讀 3,019評論 0 2
  • 線條樣式 繪制直線茴肥,第五章知識簡單回顧 lineWidth 設置或返回當前的線條寬度坚踩,單位為像素 lineCap ...
    Zd_silent閱讀 478評論 0 0
  • 本文首發(fā)于我的個人博客:http://cherryblog.site/github項目地址:https://git...
    sunshine小小倩閱讀 1,991評論 1 8