代碼實(shí)現(xiàn)
<body>
<canvas id="can" width="300px" height="300px" style="background: seashell;"></canvas>
<br />
<button onclick="draw('repeat')">重復(fù)</button>
<button onclick="draw('repeat-x')">重復(fù)-x</button>
<button onclick="draw('repeat-y')">重復(fù)-y</button>
<button onclick="draw('no-repeat')">不重復(fù)</button>
<canvas id="img" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<br />
<canvas id="myCanvas" width="300px" height="150px"></canvas><br />
<canvas id="myc" width="300px" height="150px"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("can");
var ctx = c.getContext("2d");
//線性漸變
var xian = ctx.createLinearGradient(0,0,100,0)
xian.addColorStop(0,"#333");
xian.addColorStop(0.5,"red");
xian.addColorStop(1,"seashell")
ctx.fillStyle = xian;//addColor添加顏色
ctx.fillRect(20,20,150,100)
//圖片渲染進(jìn)canvas
var img=document.getElementById("lamp")
var myc=document.getElementById("myc");
var ctx3=myc.getContext("2d");
ctx3.beginPath();
ctx3.moveTo(20,20);
//二次貝賽爾曲線
ctx3.quadraticCurveTo(20,100,200,20);
ctx3.lineTo(20,100);
ctx3.lineTo(30,100);
ctx3.strokeStyle = "yellow"
console.log(ctx3);
ctx3.drawImage(img,0,0);
ctx3.stroke();
function draw(direction)
{
var d=document.getElementById("img");
var ctx1=d.getContext("2d");
ctx1.clearRect(0,0,d.width,d.height);
var pat=ctx.createPattern(img,direction);
ctx1.rect(0,0,220,128);
ctx1.fillStyle=pat;
ctx1.fill();
}
var e = document.getElementById("myCanvas");
var ctx2=e.getContext("2d");
//鏡像漸變
var grd=ctx2.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx2.fillStyle=grd;
ctx2.fillRect(10,10,150,100);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
// Turn transparency on 打開透明模式
ctx.globalAlpha=0.2;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);
</script>
canvas globalCompositeOperation 屬性 圖形屬性
屬性
顏色满钟、樣式和陰影
fillStyle 設(shè)置或返回用于填充繪畫的顏色、漸變或模式株依。
strokeStyle 設(shè)置或返回用于筆觸的顏色疆拘、漸變或模式宪郊。
shadowColor 設(shè)置或返回用于陰影的顏色软吐。
shadowBlur 設(shè)置或返回用于陰影的模糊級(jí)別膘盖。
shadowOffsetX 設(shè)置或返回陰影與形狀的水平距離鞋拟。
shadowOffsetY 設(shè)置或返回陰影與形狀的垂直距離。
createLinearGradient() 創(chuàng)建線性漸變（用在畫布內(nèi)容上）蚌父。
createPattern() 在指定的方向上重復(fù)指定的元素蚕礼。
createRadialGradient() 創(chuàng)建放射狀/環(huán)形的漸變（用在畫布內(nèi)容上）。
addColorStop() 規(guī)定漸變對(duì)象中的顏色和停止位置梢什。
線條樣式
lineCap 設(shè)置或返回線條的結(jié)束端點(diǎn)樣式。
lineJoin 設(shè)置或返回兩條線相交時(shí)朝聋，所創(chuàng)建的拐角類型嗡午。
lineWidth 設(shè)置或返回當(dāng)前的線條寬度。
miterLimit 設(shè)置或返回最大斜接長(zhǎng)度冀痕。
矩形
rect() 創(chuàng)建矩形荔睹。
fillRect() 繪制"被填充"的矩形。
strokeRect() 繪制矩形（無(wú)填充）言蛇。
clearRect() 在給定的矩形內(nèi)清除指定的像素僻他。
路徑
fill() 填充當(dāng)前繪圖（路徑）。
stroke() 繪制已定義的路徑腊尚。
beginPath() 起始一條路徑吨拗，或重置當(dāng)前路徑。
moveTo() 把路徑移動(dòng)到畫布中的指定點(diǎn)婿斥，不創(chuàng)建線條劝篷。
closePath() 創(chuàng)建從當(dāng)前點(diǎn)回到起始點(diǎn)的路徑。
lineTo() 添加一個(gè)新點(diǎn)民宿，然后在畫布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條娇妓。
clip() 從原始畫布剪切任意形狀和尺寸的區(qū)域。
quadraticCurveTo() 創(chuàng)建二次貝塞爾曲線活鹰。
bezierCurveTo() 創(chuàng)建三次貝塞爾曲線哈恰。
arc() 創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）。
arcTo() 創(chuàng)建兩切線之間的弧/曲線志群。
isPointInPath() 如果指定的點(diǎn)位于當(dāng)前路徑中着绷，則返回 true，否則返回 false赖舟。
轉(zhuǎn)換
scale() 縮放當(dāng)前繪圖至更大或更小蓬戚。
rotate() 旋轉(zhuǎn)當(dāng)前繪圖。
translate() 重新映射畫布上的 (0,0) 位置宾抓。
transform() 替換繪圖的當(dāng)前轉(zhuǎn)換矩陣子漩。
setTransform() 將當(dāng)前轉(zhuǎn)換重置為單位矩陣豫喧。然后運(yùn)行 transform()。
文本
font 設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性幢泼。
textAlign 設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式紧显。
textBaseline 設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線。
fillText() 在畫布上繪制"被填充的"文本缕棵。
strokeText() 在畫布上繪制文本（無(wú)填充）孵班。
measureText() 返回包含指定文本寬度的對(duì)象。
圖像繪制
drawImage() 向畫布上繪制圖像招驴、畫布或視頻篙程。
像素操作
width 返回 ImageData 對(duì)象的寬度。
height 返回 ImageData 對(duì)象的高度别厘。
data 返回一個(gè)對(duì)象虱饿，其包含指定的 ImageData 對(duì)象的圖像數(shù)據(jù)。
createImageData() 創(chuàng)建新的触趴、空白的 ImageData 對(duì)象氮发。
getImageData() 返回 ImageData 對(duì)象，該對(duì)象為畫布上指定的矩形復(fù)制像素?cái)?shù)據(jù)冗懦。
putImageData() 把圖像數(shù)據(jù)（從指定的 ImageData 對(duì)象）放回畫布上爽冕。
合成
globalAlpha 設(shè)置或返回繪圖的當(dāng)前 alpha 或透明值。
globalCompositeOperation 設(shè)置或返回新圖像如何繪制到已有的圖像上披蕉。
