徑向漸變
grd=createRadialGradient(x0,y0,r0,x1,y1,r1)
grd.addColorStop(位置督赤，color)
繪制背景圖
- 把圖片填充為背景
var img=document.getElementById('img')
img.src='1.jpg
var pattern=cxt.createPattern(img,repeat-x/repead-y/repeat/no-repeat)
加載圖片需要寫在window.onload=function(){}里
變換（對(duì)繪圖環(huán)境進(jìn)行變換）
-
縮放scale( scalewidth丽已，scaleheight)
- oscalewidth : 縮放當(dāng)前繪圖的寬度 (1=100%, 0.5=50%, 2=200%, 依次類推)
- scaleheight : 縮放當(dāng)前繪圖的高度 (1=100%, 0.5=50%, 2=200%, etc.)
注意：縮放的是整個(gè)畫布，縮放后，繼續(xù)繪制的圖形會(huì)被放大或縮小
-
位移translate(x,y)团驱，重新映射畫布上的（0,0）位置；
- x:添加到水平坐標(biāo)（x）上的值
- y:添加到垂直坐標(biāo)（y）上的值
- 發(fā)生位移后，相當(dāng)于把畫布的0,0坐標(biāo) 更新到新的寫x,y的位置，所有繪制的新元素都被影響
-
rotate(弧度)
- 如需將角度轉(zhuǎn)換為弧度仰美，請(qǐng)使用 degrees*Math.PI/180 公式進(jìn)行計(jì)算
繪制環(huán)境保存和還原
- save() 保存當(dāng)前繪圖環(huán)境
- restore()恢復(fù)之前的繪圖環(huán)境
設(shè)置透明度
- globalAlpha=number 設(shè)置不透明度（0透明，1不透明）
- 全局設(shè)置是對(duì)整個(gè)畫布（繪圖環(huán)境）進(jìn)行設(shè)置
畫布限定區(qū)域繪制
- clip()方法從原始畫布中剪切任意形狀和尺寸
- 一旦剪切了某個(gè)區(qū)域儿礼，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)咖杂，不能訪問畫布上的其他區(qū)域
畫布保存base64編碼內(nèi)容
- 把canvas繪制的內(nèi)容輸出成base64內(nèi)容
- canvas.toDataURL(type，encoderOptions);
eg:
var canvas=document.getElementById('mycanvas')
canvas.toDataURL(image/ipg,1) - 參數(shù)說明：
- type蚊夫，設(shè)置輸入的類型诉字，image/png,image/jpeg等
- encoderOptions：0-1之間的數(shù)字，用于標(biāo)識(shí)圖片的質(zhì)量知纷，1表示無損壓縮奏窑，o類型為： image/jpeg 或者image/webp才起作用。
畫布渲染畫布
- context.drawImage(img,x,y)
- img也可以是一個(gè)畫布整體的渲染到另一個(gè)畫布上
線條樣式
- lineCap 設(shè)置或返回線條的結(jié)束斷點(diǎn)（線頭屈扎、線冒）樣式
- butt:默認(rèn)，向線條的每個(gè)末端添加平直的邊緣撩匕。
- oround ： 向線條的每個(gè)末端添加圓形線帽鹰晨。
- square： 向線條的每個(gè)末端添加正方形線帽。
- lineJoin 設(shè)置或返回兩條線相交時(shí)止毕，所創(chuàng)建的拐角類型
- bevel:創(chuàng)建斜角模蜡。
- round: 創(chuàng)建圓角.
- miter: 默認(rèn)。創(chuàng)建尖角
- miterLimit 設(shè)置或返回最大斜接長(zhǎng)度
- 斜接長(zhǎng)度指的是在兩條線交匯處內(nèi)角和外角之間的距離扁凛。
- 一般用默認(rèn)值：10就可以了忍疾。除非需要特別長(zhǎng)的尖角時(shí)，使用此屬性谨朝。
