canvas簡單入門(2)

文字方法

  • strokeText(text, x, y) 描邊寫字
  • fillText(text, x, y) 填充寫字
  • measureText(text) 返回對象 包換文本的寬度
  • font 屬性 設(shè)置 大小、字體 如 cxt.fon="100px MicrosoftYaHei";
  • textAlign 屬性 水平對齊方式 start(默認)/end/center/left/right
  • textBaseline 屬性 垂直對齊方式 alphabetic(默認)/top/bottom/middke/hanging/ideographic

繪制圖片（插入圖片）

插入圖片

drawImage(img, x, y)

  • img image的dom元素
  • x,y 插入到 畫布的位置 坐標

插入圖片并改變大小

drawImage(img, x, y, width, height)

插入裁剪后的圖片

drawImage(img, sx,sy,swidth,sheight, x, y, width, height)

  • sx/sy: 圖片上開始裁剪的位置
  • swidth/sheight : 裁剪圖片的大小

陰影

  • shadowColor 陰影顏色
  • shadowBlur 陰影的模糊值
  • shadowOffsetX 陰影的左偏移量
  • shadowOffsetY 陰影的右偏移量

漸變

線性漸變

var grd = cxt.createLinearGradien(x, y, x1, y1);

grd.addColorStop(位置, color)

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容