超多經(jīng)典 canvas 實(shí)例
普及：<canvas> 元素用于在網(wǎng)頁(yè)上繪制圖形。這是一個(gè)圖形容器点额，您可以控制其每一像素舔株，必須使用腳本來(lái)繪制圖形。
注意：IE 8 以及更早的版本不支持 <canvas> 元素还棱。
貼士：全部例子都分享在我的 GayHub - https://github.com/bxm0927/canvas-special
尤雨溪個(gè)人主頁(yè)炫彩三角紐帶效果载慈，點(diǎn)擊還可變換
知乎登錄注冊(cè)頁(yè)動(dòng)態(tài)離子背景效果
基于 canvas 的五子棋完整功能實(shí)現(xiàn)
基于 canvas 的《是男人就下100層》小游戲完美實(shí)現(xiàn)
毛筆字書(shū)寫(xiě)田字格琳要，可以寫(xiě)字
隨心而動(dòng)，隨刃而行稚补。輸入文字顯示動(dòng)畫(huà)粒子特效
鼠標(biāo)移動(dòng)炫彩小球
2048
貪吃蛇
看你有多色
坦克大戰(zhàn)
宇宙行星旋轉(zhuǎn)特效
支付寶咻咻咻動(dòng)畫(huà)特效
程序員表白代碼
心形文字
照片墻
License
The code is available under the MIT license.
<marquee>不斷更新凡橱，歡迎補(bǔ)充小作！</marquee>
!canvas 簡(jiǎn)介
<canvas> 元素用于在網(wǎng)頁(yè)上繪制圖形。這是一個(gè)圖形容器稼钩，您可以控制其每一像素顾稀，必須使用腳本來(lái)繪制圖形。
<canvas> 標(biāo)記和 SVG 以及 VML 之間的一個(gè)重要的不同是坝撑，<canvas> 有一個(gè)基于 JavaScript 的繪圖 API静秆，而 SVG 和 VML 使用一個(gè) XML 文檔來(lái)描述繪圖粮揉。
注意：IE 8 以及更早的版本不支持 <canvas> 元素。
canvas 初體驗(yàn)
<canvas id="myCanvas" width="450" height="450">
Your browser does not support the Canvas API, Please upgrade your browser.
</canvas>
<script>
let myCanvas = document.getElementById('myCanvas');
let ctx = myCanvas.getContext('2d');
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(200, 300);
ctx.stroke();
</script>
canvas 核心 API 講解
建議大家看官方文檔來(lái)系統(tǒng)的學(xué)習(xí) canvas API抚笔，本文下面的例子只是對(duì)知識(shí)點(diǎn)的鞏固扶认。
- MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
- 菜鳥(niǎo)教程：http://www.runoob.com/tags/ref-canvas.html
- w3school：http://www.w3school.com.cn/tags/html_ref_canvas.asp
顏色、樣式和陰影
fillStyle殊橙、strokeStyle
fillStyle 屬性設(shè)置或返回用于填充繪畫(huà)的顏色辐宾、漸變或模式。
strokeStyle 屬性設(shè)置或返回用于筆觸的顏色膨蛮、漸變或模式叠纹。
// 用藍(lán)色填充矩形
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
// 漸變填充
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
// 圖像填充
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
shadowBlur、shadowColor
shadowBlur 設(shè)置或返回用于陰影的模糊級(jí)別
shadowColor 設(shè)置或返回用于陰影的顏色
注釋1：請(qǐng)將 shadowColor 屬性與 shadowBlur 屬性一起使用鸽疾，來(lái)創(chuàng)建陰影吊洼。
注釋2：請(qǐng)通過(guò)使用 shadowOffsetX 和 shadowOffsetY 屬性來(lái)調(diào)節(jié)陰影效果。
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);
createLinearGradient()制肮、createRadialGradient()
context.createLinearGradient(x0,y0,x1,y1) 創(chuàng)建線性漸變
context.createRadialGradient(x0,y0,r0,x1,y1,r1) 創(chuàng)建放射狀/環(huán)形的漸變
注釋?zhuān)?code>addColorStop(stop,color) 方法與 createLinearGradient() 或 createRadialGradient() 一起使用冒窍。
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
context.createPattern()
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat") 重復(fù)繪制元素，元素可以是圖片豺鼻、視頻综液，或者其他 <canvas> 元素。
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
線條樣式
lineCap
context.lineCap="butt|round|square"
設(shè)置或返回線條的結(jié)束端點(diǎn)樣式 （平直的邊緣(默認(rèn))儒飒、圓形線帽谬莹、正方形線帽）
lineJoin
context.lineJoin="miter|bevel|round"
設(shè)置或返回兩條線相交時(shí)，所創(chuàng)建的拐角類(lèi)型 （尖角(默認(rèn))桩了、斜角附帽、圓角）
ctx.beginPath();
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();
lineWidth
ctx.lineWidth = 10
設(shè)置或返回當(dāng)前的線條寬度，單位 px
矩形
rect()井誉、fillRect()蕉扮、strokeRect()
context.rect(x,y,width,height) 創(chuàng)建矩形
context.fillRect(x,y,width,height) 創(chuàng)建已填色的矩形，默認(rèn)的填充顏色是黑色颗圣。
context.strokeRect(x,y,width,height) 創(chuàng)建不填色的矩形喳钟，默認(rèn)的筆觸顏色是黑色。
// 紅色矩形
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();
clearRect()
clearRect() 在給定的矩形內(nèi)清除指定的像素
// 在給定矩形內(nèi)清空一個(gè)矩形
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);
路徑
提示：請(qǐng)使用這些方法來(lái)創(chuàng)建路徑：moveTo()在岂、lineTo()奔则、quadricCurveTo()、bezierCurveTo()蔽午、arcTo() 以及 arc()易茬。
fill()
填充當(dāng)前的圖像（路徑）。默認(rèn)顏色是黑色祠丝。
提示：請(qǐng)使用 fillStyle 屬性來(lái)填充另一種顏色/漸變疾呻。
注釋?zhuān)喝绻窂轿搓P(guān)閉除嘹，那么 fill() 方法會(huì)從路徑結(jié)束點(diǎn)到開(kāi)始點(diǎn)之間添加一條線写半，以關(guān)閉該路徑岸蜗，然后填充該路徑。
// 繪制 150*100 像素的矩形叠蝇，然后用綠色來(lái)給它填色：
ctx.rect(20,20,150,100);
ctx.fillStyle="green";
ctx.fill();
stroke()
stroke() 方法會(huì)繪制出通過(guò) moveTo() 和 lineTo() 方法定義的路徑璃岳。默認(rèn)顏色是黑色。
提示：請(qǐng)使用 strokeStyle 屬性來(lái)繪制另一種顏色/漸變悔捶。
beginPath()
beginPath() 起始一條路徑铃慷，或重置當(dāng)前路徑
closePath()
closePath() 創(chuàng)建從當(dāng)前點(diǎn)回到起始點(diǎn)的路徑
moveTo()、lineTo()
moveTo() 把路徑移動(dòng)到畫(huà)布中的指定點(diǎn)蜕该，不創(chuàng)建線條
lineTo() 添加一個(gè)新點(diǎn)犁柜，然后在畫(huà)布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
quadraticCurveTo()、bezierCurveTo()
context.quadraticCurveTo(cpx,cpy,x,y); 創(chuàng)建二次貝塞爾曲線
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 創(chuàng)建三次方貝塞爾曲線
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
arc()堂淡、arcTo()
context.arc(x,y,r,sAngle,eAngle[,counterclockwise]); 創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）
context.arcTo(x1,y1,x2,y2,r); 創(chuàng)建兩切線之間的弧/曲線
ctx.beginPath();
arc(100, 75, 50, 0*Math.PI, 1.5*Math.PI)
ctx.stroke();
ctx.beginPath();
ctx.moveTo(20,20); // 創(chuàng)建開(kāi)始點(diǎn)
ctx.lineTo(100,20); // 創(chuàng)建水平線
ctx.arcTo(150,20,150,70,50); // 創(chuàng)建弧
ctx.lineTo(150,120); // 創(chuàng)建垂直線
ctx.stroke(); // 進(jìn)行繪制
clip()
clip() 從原始畫(huà)布剪切任意形狀和尺寸的區(qū)域
// 剪切矩形區(qū)域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后繪制綠色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
isPointInPath()
isPointInPath() 如果指定的點(diǎn)位于當(dāng)前路徑中馋缅，則返回 true，否則返回 false
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50)) {
ctx.stroke()
}
轉(zhuǎn)換
scale()
scale() 縮放當(dāng)前繪圖至更大或更小
// 繪制矩形绢淀，放大到 200%萤悴，然后再次繪制矩形：
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
rotate()
rotate() 旋轉(zhuǎn)當(dāng)前繪圖
// 將矩形旋轉(zhuǎn) 20 度：
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50,20,100,50);
translate()
translate() 重新定義畫(huà)布上的 (0,0) 位置
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
transform()、setTransform()
context.transform(a,b,c,d,e,f); 替換繪圖的當(dāng)前轉(zhuǎn)換矩陣
context.setTransform(a,b,c,d,e,f); 將當(dāng)前轉(zhuǎn)換重置為單位矩陣皆的。然后運(yùn)行 transform()
文本
font覆履、textAlign、textBaseline
font 設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性
textAlign 設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式
textBaseline 設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線
fillText()费薄、strokeText()硝全、measureText()
context.fillText(text, x, y, maxWidth); 在畫(huà)布上繪制被填充的文本
context.strokeText(text,x,y,maxWidth); 在畫(huà)布上繪制文本（無(wú)填充）
context.measureText(text).width; 返回包含指定文本寬度的對(duì)象
ctx.font="30px Arial";
ctx.fillText("Hello World", 10, 50);
ctx.font="40px Arial";
// 創(chuàng)建漸變
var gradient=ctx.createLinearGradient(0, 0, myCanvas.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 用漸變填色
ctx.strokeStyle=gradient;
ctx.strokeText("Hello World", 10, 90);
圖像繪制
drawImage()
context.drawImage(img,x,y,width,height); 向畫(huà)布上繪制圖像、畫(huà)布或視頻
var img=document.getElementById("tulip");
ctx.drawImage(img, 10, 10);
像素操作
width楞抡、height伟众、data
width 返回 ImageData 對(duì)象的寬度
height 返回 ImageData 對(duì)象的高度
data 返回一個(gè)對(duì)象，其包含指定的 ImageData 對(duì)象的圖像數(shù)據(jù)
createImageData()拌倍、getImageData()赂鲤、putImageData()
createImageData() 創(chuàng)建新的、空白的 ImageData 對(duì)象
getImageData() 返回 ImageData 對(duì)象柱恤，該對(duì)象為畫(huà)布上指定的矩形復(fù)制像素?cái)?shù)據(jù)
putImageData() 把圖像數(shù)據(jù)（從指定的 ImageData 對(duì)象）放回畫(huà)布上
合成
context.globalAlpha = number; 設(shè)置或返回繪圖的當(dāng)前 alpha 或透明值
context.globalCompositeOperation="source-in"; 設(shè)置或返回新圖像如何繪制到已有的圖像上
其他
save()数初、restore()
save() 保存當(dāng)前環(huán)境的狀態(tài)
restore() 返回之前保存過(guò)的路徑狀態(tài)和屬性
getContext
let cxt = Canvas.getContext('2d')
為不同的繪制類(lèi)型 （2d梗顺、3d） 提供不同的環(huán)境泡孩，當(dāng)前唯一支持的是 2d 環(huán)境
