Canvas繪制2D圖像API列表

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其屬性和方法俏讹。

顏色、樣式和陰影

fillStyle 設置或返回用于填充繪畫的顏色畜吊、漸變或模式
  strokeStyle 設置或返回用于筆觸的顏色泽疆、漸變或模式
  shadowColor 設置或返回用于陰影的顏色
  shadowBlur 設置或返回用于陰影的模糊級別
  shadowOffsetX 設置或返回陰影距形狀的水平距離
  shadowOffsetY 設置或返回陰影距形狀的垂直距離
  createLinearGradient() 創(chuàng)建線性漸變(用在畫布內(nèi)容上)
  createPattern() 在指定的方向上重復指定的元素
  createRadialGradient() 創(chuàng)建放射狀/環(huán)形的漸變(用在畫布內(nèi)容上)
  addColorStop() 規(guī)定漸變對象中的顏色和停止位置

線條樣式

lineCap 設置或返回線條的結束端點樣式
  lineJoin 設置或返回兩條線相交時,所創(chuàng)建的拐角類型
  lineWidth 設置或返回當前的線條寬度
  miterLimit 設置或返回最大斜接長度

矩形

rect() 創(chuàng)建矩形
  fillRect() 繪制“被填充”的矩形
  strokeRect() 繪制矩形(無填充)
  clearRect() 在給定的矩形內(nèi)清除指定的像素

路徑

fill() 填充當前繪圖(路徑)
  stroke() 繪制已定義的路徑
  beginPath() 起始一條路徑定拟,或重置當前路徑
  moveTo() 把路徑移動到畫布中的指定點于微,不創(chuàng)建線條
  closePath() 創(chuàng)建從當前點回到起始點的路徑
  lineTo() 添加一個新點,然后在畫布中創(chuàng)建從該點到最后指定點的線條
  clip() 從原始畫布剪切任意形狀和尺寸的區(qū)域
  quadraticCurveTo() 創(chuàng)建二次貝塞爾曲線
  bezierCurveTo() 創(chuàng)建三次方貝塞爾曲線
  arc() 創(chuàng)建弧/曲線(用于創(chuàng)建圓形或部分圓)
  arcTo() 創(chuàng)建兩切線之間的弧/曲線
  isPointInPath() 如果指定的點位于當前路徑中青自,則返回 true株依,否則返回 false

轉換

scale() 縮放當前繪圖至更大或更小
  rotate() 旋轉當前繪圖
  translate() 重新映射畫布上的 (0,0) 位置
  transform() 替換繪圖的當前轉換矩陣
  setTransform() 將當前轉換重置為單位矩陣。然后運行 transform()

文本

font 設置或返回文本內(nèi)容的當前字體屬性
  textAlign 設置或返回文本內(nèi)容的當前對齊方式
  textBaseline 設置或返回在繪制文本時使用的當前文本基線
  fillText() 在畫布上繪制“被填充的”文本
  strokeText() 在畫布上繪制文本(無填充)
  measureText() 返回包含指定文本寬度的對象

圖像繪制

drawImage() 向畫布上繪制圖像延窜、畫布或視頻

像素操作

width 返回 ImageData 對象的寬度
  height 返回 ImageData 對象的高度
  data 返回一個對象恋腕,其包含指定的 ImageData 對象的圖像數(shù)據(jù)
  createImageData() 創(chuàng)建新的、空白的 ImageData 對象
  getImageData() 返回 ImageData 對象逆瑞,該對象為畫布上指定的矩形復制像素數(shù)據(jù)
  putImageData() 把圖像數(shù)據(jù)(從指定的 ImageData 對象)放回畫布上

合成

globalAlpha 設置或返回繪圖的當前 alpha 或透明值
  globalCompositeOperation 設置或返回新圖像如何繪制到已有的圖像上

其他

save() 保存當前環(huán)境的狀態(tài)
  restore() 返回之前保存過的路徑狀態(tài)和屬性
  createEvent()
  getContext()
  toDataURL()

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末荠藤,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子获高,更是在濱河造成了極大的恐慌哈肖,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件念秧,死亡現(xiàn)場離奇詭異淤井,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進店門币狠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來游两,“玉大人,你說我怎么就攤上這事漩绵〖福” “怎么了?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵止吐,是天一觀的道長宝踪。 經(jīng)常有香客問我,道長碍扔,這世上最難降的妖魔是什么肴沫? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮蕴忆,結果婚禮上,老公的妹妹穿的比我還像新娘悲幅。我一直安慰自己套鹅,他們只是感情好,可當我...
    茶點故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布汰具。 她就那樣靜靜地躺著卓鹿,像睡著了一般。 火紅的嫁衣襯著肌膚如雪留荔。 梳的紋絲不亂的頭發(fā)上吟孙,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天,我揣著相機與錄音聚蝶,去河邊找鬼杰妓。 笑死,一個胖子當著我的面吹牛碘勉,可吹牛的內(nèi)容都是我干的巷挥。 我是一名探鬼主播,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼验靡,長吁一口氣:“原來是場噩夢啊……” “哼倍宾!你這毒婦竟也來了?” 一聲冷哼從身側響起胜嗓,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤高职,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后辞州,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體怔锌,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了产禾。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片排作。...
    茶點故事閱讀 39,926評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖亚情,靈堂內(nèi)的尸體忽然破棺而出妄痪,到底是詐尸還是另有隱情,我是刑警寧澤楞件,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布衫生,位于F島的核電站,受9級特大地震影響土浸,放射性物質發(fā)生泄漏罪针。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一黄伊、第九天 我趴在偏房一處隱蔽的房頂上張望泪酱。 院中可真熱鬧,春花似錦还最、人聲如沸墓阀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽斯撮。三九已至,卻和暖如春扶叉,著一層夾襖步出監(jiān)牢的瞬間勿锅,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工枣氧, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留溢十,地道東北人。 一個月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓作瞄,卻偏偏與公主長得像茶宵,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子宗挥,可洞房花燭夜當晚...
    茶點故事閱讀 44,871評論 2 354

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

  • 一乌庶、簡介 HTML5 中的定義:“它是依賴分辨率的位圖畫布,你可以在 canvas 上面繪制任何圖形契耿,甚至加載照片...
    destiny0904閱讀 10,541評論 1 4
  • 一:canvas簡介 1.1什么是canvas瞒大? ①:canvas是HTML5提供的一種新標簽 ②:HTML5 ...
    GreenHand1閱讀 4,683評論 2 32
  • 線條樣式 繪制直線,第五章知識簡單回顧 lineWidth 設置或返回當前的線條寬度搪桂,單位為像素 lineCap ...
    Zd_silent閱讀 476評論 0 0
  • 首先我們來了解以下canvas標簽: canvas是HTML5新增的標簽透敌,用于在網(wǎng)頁上實時生成圖像盯滚。 canvas...
    SkyNet_Z閱讀 860評論 2 0
  • 本章內(nèi)容 理解 元素 繪制簡單的 2D 圖形 使用 WebGL 繪制 3D 圖形 這個元素負責在頁面中設定一個區(qū)域...
    悶油瓶小張閱讀 849評論 0 0