初識(shí)canvas
前段時(shí)間重新看了一下canvas橘茉，覺(jué)得很有意思，現(xiàn)在總結(jié)一下姨丈，只限于基礎(chǔ)的畅卓，中間有一些小的案例，說(shuō)的有一些啰嗦蟋恬，建議初學(xué)者參考翁潘，歡迎批評(píng)指正，共同進(jìn)步歼争！
首先拜马，我們來(lái)認(rèn)識(shí)一下，什么是canvas
一矾飞、Canvas定義：
通常用于繪制圖表一膨、動(dòng)畫(huà)，通過(guò)腳本（javascript）來(lái)完成,?<canvas> 元素本身并沒(méi)有繪制能力（它僅僅是圖形的容器）
不支持canvas的瀏覽器頁(yè)面為空不顯示 （ie9以下）
可在canvas標(biāo)簽內(nèi)寫(xiě)p標(biāo)簽
<p>您的瀏覽器不支持canvas</p>
支持cnavas的瀏覽器將不識(shí)別此標(biāo)簽
二洒沦、Canvas使用方法：
創(chuàng)建一個(gè)畫(huà)布豹绪，在頁(yè)面中引入canvas標(biāo)簽， 默認(rèn)寬300px ?高 150px
<canvas? id="can" ></canvas>//默認(rèn)寬300px ?高 150px
設(shè)置畫(huà)布大小的方法：
1申眼、屬性width ?height 設(shè)置寬高瞒津，畫(huà)布上每個(gè)點(diǎn)都是一個(gè)像素
<canvas? id="can" width="800" height="800"></canvas>
那么問(wèn)題來(lái)了
是否可以在style里面修改畫(huà)布大小括尸？
不可以 巷蚪，畫(huà)布里面的內(nèi)容也會(huì)被縮放
獲取canvas畫(huà)布：
var oC = document.getElementById('can');
繪制繪圖環(huán)境
var cte = oC.getContext('2d');
設(shè)置繪制環(huán)境?：getContext(默認(rèn)的是2d的場(chǎng)景)?------方法可返回一個(gè)對(duì)象，該對(duì)象提供了用于在畫(huà)布上繪圖的方法和屬性濒翻。
繪制圖形
一 屁柏、繪制方塊
fillRect(X,Y,W,H): 默認(rèn)填充顏色是黑色
參數(shù)：
X/Y:距離畫(huà)布的坐標(biāo)
W/H:矩形的寬高
var can = document.getElementById('can');//獲取畫(huà)布
var canT = can.getContext('2d');//繪制繪圖環(huán)境
canT.fillRect(10,10,100,100);//畫(huà)矩形
效果圖：
設(shè)置繪圖樣式? ? (繪制填充矩形要先設(shè)置樣式，再繪制)
fillStyle: 填充繪畫(huà)的顏色有送、漸變或模式
填充的矩形要設(shè)置lineJoin樣式（設(shè)置一個(gè)同坐標(biāo)的描邊矩形淌喻，設(shè)置描邊矩形的lineJoin樣式
var can = document.getElementById('can');
var canT = can.getContext('2d');
canT.fillStyle='#f40';//繪制填充矩形要先設(shè)置樣式，再繪制
canT.fillRect(10,10,100,100);
效果圖：
二雀摘，設(shè)置描邊矩形
strokeRect(X,Y,W,H)： 帶邊框的方塊裸删，默認(rèn)一像素黑色邊框
參數(shù)：
X/Y:距離畫(huà)布的坐標(biāo)
W/H:矩形的寬高
var can = document.getElementById('can');
var canT = can.getContext('2d');
canT.fillStyle='#f40';
canT.fillRect(10,10,100,100);
canT.strokeRect(150,10,100,100);
效果圖：
設(shè)置繪圖樣式? （ 繪制填充矩形要先設(shè)置樣式，再繪制）
a 繪圖環(huán)境.strokeStyle='顏色'
b 繪圖環(huán)境.lineWidth ='數(shù)值'
a繪圖環(huán)境.strokeStyle='顏色'
var can = document.getElementById('can');
var canT = can.getContext('2d');//畫(huà)圖的方法和屬性放在了這里
canT.fillStyle='#f40';
canT.fillRect(10,10,100,100);
canT.strokeStyle='#f40';繪制填充矩形要先設(shè)置樣式阵赠，再繪制
canT.strokeRect(150,10,100,100);
效果圖:
b 繪圖環(huán)境.lineWidth ='數(shù)值'
var can = document.getElementById('can');
var canT = can.getContext('2d');
canT.fillStyle='#f40';
canT.fillRect(10,10,100,100);
canT.lineWidth = '30';//線條寬度涯塔，設(shè)置在繪圖前
canT.strokeStyle='#f40';//線條顏色肌稻，設(shè)置在繪圖前
canT.strokeRect(150,10,100,100);
三、邊界繪制
lineJoin: 邊界連接點(diǎn)樣式? 設(shè)置在繪圖前
----miter? [?ma?t?r]? [?ma?t?(r)] 默認(rèn)匕荸，round(圓角)爹谭，bevel [?bevl]? [?bevl](斜角)
? canT.lineWidth = '30';//線條寬度，設(shè)置在繪圖前
? canT.strokeStyle='#f40';
? canT.lineJoin='round';//圓角每聪，設(shè)置在繪圖前
? canT.strokeRect(150,10,100,100);
效果圖：
canT.lineWidth = '30';//線條寬度旦棉，設(shè)置在繪圖前
canT.strokeStyle='#f40';
canT.lineJoin='bevel';//斜角角設(shè)置在繪圖前
canT.strokeRect(150,10,100,100);
效果圖：
四、繪制路徑
beginPath(): 開(kāi)啟一條新路徑
closePath（）: 閉合當(dāng)前路徑
moveTo（x,y）: 定義線條開(kāi)始坐標(biāo)
lineTo（x,y）: 定義線條結(jié)束坐標(biāo)
stroke(): 畫(huà)線药薯，默認(rèn)黑色
? canT.beginPath();//開(kāi)啟一條新路徑
? canT.lineWidth = '30';//線條寬度，設(shè)置在繪圖前
? canT.moveTo(300,100);//定義線條開(kāi)始坐標(biāo)
? canT.lineTo(400,200);//定義線條結(jié)束坐標(biāo)
? canT.stroke();// 畫(huà)線救斑，默認(rèn)黑色
效果圖：
lineCap: 端點(diǎn)樣式
----butt(默認(rèn)), round(圓角)童本，square
fill（）: 填充，默認(rèn)黑色
rect（）: 矩形區(qū)域（x,y,w,h）
clearRect(x,y,width,height) 方法清空給定矩形內(nèi)的指定像素脸候。
lineCap: 端點(diǎn)樣式
----butt(默認(rèn)), round(圓角)穷娱，square
? canT.beginPath();//開(kāi)啟一條新路徑
? canT.lineWidth = '30';//線條寬度，設(shè)置在繪圖前
? canT.moveTo(300,100);//定義線條開(kāi)始坐標(biāo)
? canT.lineTo(400,200);//定義線條結(jié)束坐標(biāo)
? canT.lineCap = 'round';//端點(diǎn)圓角
? canT.stroke();// 畫(huà)線运沦，默認(rèn)黑色
canT.beginPath();//開(kāi)啟一條新路徑
canT.lineWidth = '30';//線條寬度泵额，設(shè)置在繪圖前
canT.moveTo(300,100);//定義線條開(kāi)始坐標(biāo)
canT.lineTo(400,200);//定義線條結(jié)束坐標(biāo)
canT.lineCap = 'square';//增加原長(zhǎng)度的1/2分到兩端
canT.stroke();// 畫(huà)線，默認(rèn)黑色
效果圖：
canT.beginPath();//開(kāi)啟一條新路徑
canT.lineWidth = '30';//線條寬度携添，設(shè)置在繪圖前? ? ?
canT.moveTo(300,100);//定義線條開(kāi)始坐標(biāo)
canT.lineTo(400,200);//定義線條結(jié)束坐標(biāo)
canT.lineCap = 'square';//增加元長(zhǎng)度的1/2分到兩端
canT.strokeStyle = 'red';//設(shè)置顏色
canT.fill();//填充顏色
canT.stroke();// 畫(huà)線嫁盲，默認(rèn)黑色
效果圖：
fill() 填充顏色
在用moveTo() lineTo()方法畫(huà)矩形時(shí)填充顏色使用，必須先設(shè)置顏色烈掠，fillStyle='顏色'羞秤，再用fill()填充
? ? canT.beginPath();//開(kāi)啟一條新路徑
? ? canT.lineWidth = '30';//線條寬度，設(shè)置在繪圖前? ? ?
? ? canT.moveTo(100,100);//定義線條開(kāi)始坐標(biāo)
? ? canT.lineTo(200,100);//定義線條結(jié)束坐標(biāo)
? ? canT.lineTo(200,200);
? ? canT.lineTo(100,200);
? ? canT.closePath();
? ? canT.lineCap = 'square';
? ? canT.fillStyle = 'red';//設(shè)置要填充的顏色
? canT.fill();//填充?
? canT.stroke();// 畫(huà)線左敌，默認(rèn)黑色
效果圖：
rect（）: 矩形區(qū)域（x,y,w,h）
clearRect(x,y,width,height) 方法清空給定矩形內(nèi)的指
定像素羽戒。
canT.clearRect(0,0,150,160);
x: 要清除的矩形左上角的 x 坐標(biāo)
y：要清除的矩形左上角的 y 坐標(biāo)
width: 要清除的矩形的寬度
height: 要清除的矩形的高度
? ? ? // 畫(huà)矩形方法三：
? ? ? ? // cxt.beginPath();
? ? ? ? // cxt.rect(50,50,100,100);
? ? ? ? // cxt.fillStyle = 'red';
? ? ? ? // cxt.fill();
五.畫(huà)圓
arc(x,y,r,起始弧度踢匣，終止弧度，方向)
x/y: 圓心的坐標(biāo) 定義圓的位置
r:圓的半徑 定義圓的大小
弧度：Math.PI/180(一角度的弧度)
角度與弧度的轉(zhuǎn)換關(guān)系： 角度*Math.PI/180
方向：順時(shí)針（false 默認(rèn)值），逆時(shí)針（true）
canvas中畫(huà)圓起始位置為三點(diǎn)鐘方向 六點(diǎn)鐘方向?yàn)?0度届巩，九點(diǎn)鐘方向是+-180度，12點(diǎn)鐘方向?yàn)?90度
示意圖：
案例一：
圓
cxt.arc(100,100,100 ,0,360*Math.PI/180,true);
cxt.stroke();
效果圖：
案例二：
90度扇形
? ? ? ? cxt.moveTo(100,100);
? ? ? ? cxt.arc(100,100,100 ,0,90*Math.PI/180,false);
? ? ? ? cxt.closePath();
? ? ? ? cxt.stroke();
效果圖
? ? ? ? cxt.moveTo(100,100);
? ? ? ? cxt.arc(100,100,100 ,0,90*Math.PI/180,true);
? ? ? ? cxt.closePath();
? ? ? ? cxt.stroke();
案例三
移動(dòng)的方塊
? ? num = 0;
? style = 100;
? setInterval(function(){
? cxt.clearRect(0,0,oc.width,oc.height);
? num ++; //改變位置
? style ++; //改變大小
? cxt.fillRect(num,num,style,style);
},100)
案例四：
畫(huà)扇形
120度? 設(shè)置描邊樣式朋譬，填充顏色樣式
cxt.moveTo(15,15,);
cxt.arc(150,150,150,0,120*Math.PI/180,false);
cxt.strokeStyle = '#f40';//設(shè)置描邊樣式
cxt.fillStyle = 'red';//填充顏色樣式
cxt.fill();//填充 填充顏色樣式
cxt.closePath();
cxt.stroke();
案例五：
canvasOnload
? ? var oc = document.getElementById('c1');
? ? var cxt = oc.getContext('2d');
? ? var num = 0;//定義變量
? ? var timer = setInterval(function(){
? ? cxt.clearRect(0,0,oc.width,oc.height);
? ? num+=10;//定義變化的角度 步頻
? ? cxt.beginPath();//開(kāi)始新路徑
? ? cxt.lineWidth = '6';//線寬
? ? cxt.strokeStyle ='#ccc';
? ? ? ? ? ? ? ? ? ? ? ? //起始弧度? ? ? ? ? ? //終止弧度
? ? cxt.arc(100,100,50,-90*Math.PI/180,(num+-90)*Math.PI/180,false);
? ? cxt.stroke();
? ? if(num>360){
? ? ? ? //當(dāng)圓環(huán)閉合時(shí)休蟹，清除定時(shí)器
? ? ? ? clearInterval(timer);
? ? }
? ? },50)
效果圖：
變換（平移 旋轉(zhuǎn) 縮放）
translate(x,y):
平移 可以重新定義畫(huà)布的（0,0）位置
默認(rèn)畫(huà)布（0,0）位置在畫(huà)布左上角
參數(shù)：
x/y:x/y軸的偏移量
? ctx.fillRect(0,0,200,150);//未平移前
? ctx.translate(200,150);
? ctx.fillRect(0,0,200,150);
rotate(rad);
旋轉(zhuǎn)當(dāng)前圖形?
旋轉(zhuǎn)的參考角度為畫(huà)布的（0,0）位置
角度：angle
弧度：radian
參數(shù)：
deg：旋轉(zhuǎn)角度 弧度計(jì)
弧度= 角度*Math.PI/180
ctx.rotate(45*Math.PI/180);//旋轉(zhuǎn) 寫(xiě)在繪制圖形前面
ctx.fillRect(0,0,100,50);
? ctx.fillRect(0,0,100,50);
? ctx.translate(200,150);//圖形的起始位置平移至（200,150）位置
? ctx.fillRect(0,0,100,50);
ctx.rotate(45*Math.PI/180);
ctx.fillRect(0,0,100,50);
ctx.translate(200,150);//圖形的起始位置平移至（200,150）位置
ctx.fillRect(0,0,100,50);
以物體中心旋轉(zhuǎn)
ctx.translate(50,25);//設(shè)位移量為寬高一半
ctx.rotate(45*Math.PI/180);
ctx.fillRect(-50,-25,100,50);//設(shè)填充點(diǎn)為寬高的-（1/2）
案例：
方塊旋轉(zhuǎn)
save（）: 保存路徑
restore（）: 恢復(fù)路徑
save()和restore(): 兩個(gè)配對(duì)使用，save方法用于臨時(shí)保存畫(huà)布的坐標(biāo)系統(tǒng)的狀態(tài)咬扇；restore方法用來(lái)恢復(fù)save之后保存的狀態(tài)甲葬。可以簡(jiǎn)單的理解為懈贺，save之后的一系列的操作经窖，比如translate和rotate等坡垫，在restore后，都會(huì)被釋放恢復(fù)到原來(lái)的狀態(tài)画侣。
var num =0;
ctx.translate(200,200);//定義畫(huà)布的起始（0冰悠，0）位置
var timer = setInterval(function(){
ctx.clearRect(-160,-160,oc.width,oc.height);//注意清除區(qū)域值
ctx.save();//保存路徑
num+=10;
ctx.rotate(num*Math.PI/180);
ctx.fillRect(-100,-100,200,200);
ctx.restore();//恢復(fù)路徑
},1000)
scale(x,y)放大
參數(shù)：
x:代表水平放大的倍數(shù)
y:代表垂直放大的倍數(shù)
scale(1,1),默認(rèn)
scale(2,2)放大一倍
scale(0.5,0.5)縮小一半
案例
畫(huà)鐘表
第一步：畫(huà)出60個(gè)小格子代表分針/秒針刻度,每個(gè)刻度之間是6度
function toDrow(){
// 第一步：畫(huà)出60個(gè)小格子代表分針/秒針刻度,每個(gè)刻度之間是6度
// cxt.moveTo(200,200);
// cxt.arc(200,200,150,0,6*Math.PI/180,false);
// 整個(gè)鐘表一共360度，需要進(jìn)行60次配乱，用循環(huán)
? ? for(var i = 0; i < 60; i ++){
? ? cxt.moveTo(200,200);
? ? cxt.arc(200,200,150,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
? ? cxt.stroke();
? ? //此時(shí) 將出現(xiàn)一個(gè)圓盤(pán)上出現(xiàn)60個(gè)閉合的扇形角度為6度
? ? ? ? }
? ? ? ? }
toDrow();
效果圖
function toDrow(){
// 第一步：畫(huà)出60個(gè)小格子代表分針/秒針刻度,每個(gè)刻度之間是6度
? // cxt.moveTo(200,200);
? // cxt.arc(200,200,150,0,6*Math.PI/180,false);
? // 整個(gè)鐘表一共360度溉卓，需要進(jìn)行60次，用循環(huán)
? ? cxt.beginPath();
? ? for(var i = 0; i < 60; i ++){
? ? ? cxt.moveTo(200,200);
? ? cxt.arc(200,200,150,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
? ? cxt.stroke();
? ? cxt.closePath();
//此時(shí) 將出現(xiàn)一個(gè)圓盤(pán)上出現(xiàn)60個(gè)閉合的扇形角度為6度
? ? }
//第二步：畫(huà)遮罩層
? // 用一個(gè)圓覆蓋到之前畫(huà)出分鐘/秒鐘刻度盤(pán)上搬泥，圓心相同桑寨，
//半徑小于原刻盤(pán)，制造出時(shí)中刻度的假象
? ? ? cxt.beginPath();
? ? ? cxt.fillStyle = '#fff';
? ? ? cxt.arc(200,200,140,0,360*Math.PI/180,false);
? ? ? cxt.fill();
? ? ? cxt.closePath();
}
效果圖：
function toDrow(){
// 第一步：畫(huà)出60個(gè)小格子代表分針/秒針刻度,每個(gè)刻度之間是6度
? // cxt.moveTo(200,200);
? // cxt.arc(200,200,150,0,6*Math.PI/180,false);
? // 整個(gè)鐘表一共360度忿檩，需要進(jìn)行60次尉尾，用循環(huán)
? ? cxt.beginPath();
? ? for(var i = 0; i < 60; i ++){
? ? ? cxt.moveTo(200,200);
? ? ? cxt.arc(200,200,150,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
? ? ? cxt.stroke();
//此時(shí) 將出現(xiàn)一個(gè)圓盤(pán)上出現(xiàn)60個(gè)閉合的扇形角度為6度
? ? }
? ? cxt.beginPath();
//第二步：畫(huà)遮罩層
? // 用一個(gè)圓覆蓋到之前畫(huà)出分鐘/秒鐘刻度盤(pán)上，圓心相同燥透，半徑小于原刻盤(pán)沙咏，
//制造出時(shí)中刻度的假象
? ? ? cxt.beginPath();
? ? ? cxt.fillStyle = '#fff';
? ? ? cxt.arc(200,200,140,0,360*Math.PI/180,false);
? ? ? cxt.fill();
? ? ? cxt.closePath();
//? ? 第三步：畫(huà)時(shí)針刻度
? ? // 同分鐘，整個(gè)表盤(pán)的分鐘刻度也是360度班套，分12個(gè)肢藐，每個(gè)刻度為30
? ? // 一共有12個(gè)30度
? ? cxt.beginPath();
? ? for(var i = 0; i? < 12; i ++){
? ? ? cxt.moveTo(200,200);
? ? ? cxt.lineWidth = 3;
? ? ? cxt.arc(200,200,150,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);
? ? ? cxt.stroke();
//此時(shí) 將出現(xiàn)一個(gè)圓盤(pán)上出現(xiàn)12個(gè)閉合的扇形角度為30度? 線寬為3
? ? ? ? }
? ? ? ? cxt.closePath();
? ? ? ? }
toDrow();
function toDrow(){
// 第一步：畫(huà)出60個(gè)小格子代表分針/秒針刻度,每個(gè)刻度之間是6度
? // cxt.moveTo(200,200);
? // cxt.arc(200,200,150,0,6*Math.PI/180,false);
? // 整個(gè)鐘表一共360度，需要進(jìn)行60次吱韭，用循環(huán)
? ? cxt.beginPath();
? ? for(var i = 0; i < 60; i ++){
? ? ? cxt.moveTo(200,200);
? ? ? cxt.arc(200,200,150,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
? ? ? cxt.stroke();
//此時(shí) 將出現(xiàn)一個(gè)圓盤(pán)上出現(xiàn)60個(gè)閉合的扇形角度為6度
? ? }
? ? cxt.beginPath();
//第二步：畫(huà)遮罩層
? // 用一個(gè)圓覆蓋到之前畫(huà)出分鐘/秒鐘刻度盤(pán)上吆豹，圓心相同，半徑小于原刻盤(pán)杉女，
//制造出時(shí)中刻度的假象
? ? ? cxt.beginPath();
? ? ? cxt.fillStyle = '#fff';
? ? ? cxt.arc(200,200,140,0,360*Math.PI/180,false);
? ? ? cxt.fill();
? ? ? cxt.closePath();
//? ? 第三步：畫(huà)時(shí)針刻度
? ? // 同分鐘瞻讽，整個(gè)表盤(pán)的分鐘刻度也是360度，分12個(gè)熏挎，每個(gè)刻度為30
? ? // 一共有12個(gè)30度
? ? cxt.beginPath();
? ? for(var i = 0; i? < 12; i ++){
? ? ? cxt.moveTo(200,200);
? ? ? cxt.lineWidth = 3;
? ? ? cxt.arc(200,200,150,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);
? ? ? cxt.stroke();
//此時(shí) 將出現(xiàn)一個(gè)圓盤(pán)上出現(xiàn)12個(gè)閉合的扇形角度為30度? 線寬為3
? ? ? ? }
? ? ? ? cxt.closePath();
? ? ? ? }
// 第四步：畫(huà)遮罩層
? ? //? 用一個(gè)圓覆蓋到之前畫(huà)出分鐘/秒鐘刻度盤(pán)上速勇，圓心相同，
? ? //? 半徑小于分鐘/秒鐘（原）遮罩層坎拐，制造出時(shí)中刻度的假象
? ? ? ? ? ? cxt.beginPath();
? ? ? ? ? ? cxt.fillStyle = '#fff';
? ? ? ? ? ? cxt.arc(200,200,130,0,360*Math.PI/180,false);
? ? ? ? ? ? cxt.fill();
? ? ? ? ? ? cxt.closePath();
? ? ? ? }
? ? ? ? toDrow();
效果圖：
? 第五步：畫(huà)時(shí)針?lè)轴樏脶槪ㄐ袆?dòng)軌跡）
? 圓心相同 半徑不同 烦磁，起始弧度和終止弧度相等
起始弧度與終止弧度的值有時(shí)間軸來(lái)決定
function toDrow(){
// 第一步：畫(huà)出60個(gè)小格子代表分針/秒針刻度,每個(gè)刻度之間是6度
? // cxt.moveTo(200,200);
? // cxt.arc(200,200,150,0,6*Math.PI/180,false);
? // 整個(gè)鐘表一共360度，需要進(jìn)行60次哼勇，用循環(huán)
? ? cxt.beginPath();
? ? for(var i = 0; i < 60; i ++){
? ? ? cxt.moveTo(200,200);
? ? ? cxt.arc(200,200,150,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
? ? ? cxt.stroke();
//此時(shí) 將出現(xiàn)一個(gè)圓盤(pán)上出現(xiàn)60個(gè)閉合的扇形角度為6度
? ? }
? ? cxt.beginPath();
//第二步：畫(huà)遮罩層
? // 用一個(gè)圓覆蓋到之前畫(huà)出分鐘/秒鐘刻度盤(pán)上都伪，圓心相同，半徑小于原刻盤(pán)积担，
//制造出時(shí)中刻度的假象
? ? ? cxt.beginPath();
? ? ? cxt.fillStyle = '#fff';
? ? ? cxt.arc(200,200,140,0,360*Math.PI/180,false);
? ? ? cxt.fill();
? ? ? cxt.closePath();
//? ? 第三步：畫(huà)時(shí)針刻度
? ? // 同分鐘陨晶，整個(gè)表盤(pán)的分鐘刻度也是360度，分12個(gè)，每個(gè)刻度為30
? ? // 一共有12個(gè)30度
? ? cxt.beginPath();
? ? for(var i = 0; i? < 12; i ++){
? ? ? cxt.moveTo(200,200);
? ? ? cxt.lineWidth = 3;
? ? ? cxt.arc(200,200,150,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);
? ? ? cxt.stroke();
//此時(shí) 將出現(xiàn)一個(gè)圓盤(pán)上出現(xiàn)12個(gè)閉合的扇形角度為30度? 線寬為3
? ? ? ? }
? ? ? ? cxt.closePath();
? ? ? ? }
// 第四步：畫(huà)遮罩層
? ? //? 用一個(gè)圓覆蓋到之前畫(huà)出分鐘/秒鐘刻度盤(pán)上先誉，圓心相同湿刽，
? ? //? 半徑小于分鐘/秒鐘（原）遮罩層，制造出時(shí)中刻度的假象
? ? ? ? ? ? cxt.beginPath();
? ? ? ? ? ? cxt.fillStyle = '#fff';
? ? ? ? ? ? cxt.arc(200,200,130,0,360*Math.PI/180,false);
? ? ? ? ? ? cxt.fill();
? ? ? ? ? ? cxt.closePath();
? ? ? ? ? ? // 第五步：畫(huà)時(shí)針?lè)轴樏脶槪ㄐ袆?dòng)軌跡）
? ? ? ? // 圓心相同 半徑不同 褐耳，起始弧度和終止弧度相等
? ? ? ? // 起始弧度與終止弧度的值有時(shí)間軸來(lái)決定
? ? ? ? ? ? // cxt.moveTo(200,200);
? ? ? ? ? ? // cxt.arc(200,200,150*0.5,起始弧度,終止弧度,false);
? ? ? ? ? ? // cxt.stroke();
? ? ? ? ? ? // 時(shí)針：最短最粗诈闺，
? ? ? ? cxt.beginPath();
? ? ? ? cxt.moveTo(200,200);
? ? ? ? cxt.lineWidth =4;
? ? ? ? cxt.arc(200,200,150*0.5,1,1,false);
? ? ? ? cxt.stroke();
? ? ? ? cxt.closePath();
? ? ? ? //? ? 畫(huà)分針
? ? cxt.beginPath();
? ? cxt.moveTo(200,200);
? ? cxt.lineWidth =3;
? ? cxt.arc(200,200,150*0.7,3,3,false);
? ? cxt.stroke();
? ? cxt.closePath();
? ? ? ? }
? ? ? ? toDrow();
效果圖：
// 第六步：
設(shè)置在前邊
// 想要讓時(shí)分秒的顯示和真實(shí)時(shí)間一致
// a:分別時(shí)間的時(shí)分秒
// B:讓時(shí)分秒針的位置同一
// c：將函數(shù)放入定時(shí)器，每1000ms執(zhí)行一次
// 當(dāng)時(shí)間不為整點(diǎn)時(shí)铃芦，時(shí)針在兩個(gè)數(shù)之間雅镊，此時(shí)需要將時(shí)針的位置加上偏移量
var timer = new Date();
ar tH = timer.getHours();//獲取小時(shí)
var tM = timer.getMinutes();//獲取分鐘
var tS = timer.getSeconds();//獲取秒
// 時(shí)針轉(zhuǎn)弧度
// a: 每一個(gè)格代表30度，時(shí)鐘和canvas的起始弧度相差90度刃滓，
// b: 當(dāng)時(shí)間不為整點(diǎn)時(shí)需將偏移量加上
// eg：10:30分仁烹，時(shí)針在10-11正中間，一個(gè)格式2咧虎，判斷分鐘里有幾個(gè)2
var tHVal = (30*tH-90+tM/2)*Math.PI/180;
// 分針轉(zhuǎn)弧度
// 每一個(gè)格代表6度晃危，時(shí)鐘和canvas的起始弧度相差90度，
var tMVal =(6*tM-90)*Math.PI/180;
// 秒針轉(zhuǎn)弧度
//? 每一個(gè)格代表6度老客，時(shí)鐘和canvas的起始弧度相差90度，
var tSVal =(6*tS-90)*Math.PI/180;
//? 第七步：
// 將時(shí)分秒的弧度值替換
function toDrow(){
// 第六步：
// 想要讓時(shí)分秒的顯示和真實(shí)時(shí)間一致
// a:分別時(shí)間的時(shí)分秒
// B:讓時(shí)分秒針的位置同一
// c：將函數(shù)放入定時(shí)器震叮，每1000ms執(zhí)行一次
// 當(dāng)時(shí)間不為整點(diǎn)時(shí)胧砰，時(shí)針在兩個(gè)數(shù)之間，此時(shí)需要將時(shí)針的位置加上偏移量
? var timer = new Date();
? var tH = timer.getHours();//獲取小時(shí)
? var tM = timer.getMinutes();//獲取分鐘
? var tS = timer.getSeconds();//獲取秒
// 將時(shí)分秒轉(zhuǎn)換為弧度
// 時(shí)針轉(zhuǎn)弧度
// a: 每一個(gè)格代表30度苇瓣，時(shí)鐘和canvas的起始弧度相差90度尉间，
// b: 當(dāng)時(shí)間不為整點(diǎn)時(shí)需將偏移量加上
// eg：10:30分，時(shí)針在10-11正中間击罪，一個(gè)格式2哲嘲，判斷分鐘里有幾個(gè)2
? var tHVal = (30*tH-90+tM/2)*Math.PI/180;
// 分針轉(zhuǎn)弧度
? // 每一個(gè)格代表6度眠副，時(shí)鐘和canvas的起始弧度相差90度，
? ? var tMVal =(6*tM-90)*Math.PI/180;
// 秒針轉(zhuǎn)弧度
//? 每一個(gè)格代表6度，時(shí)鐘和canvas的起始弧度相差90度荣德，
? ? var tSVal =(6*tS-90)*Math.PI/180;
//? 第七步：
? // 將時(shí)分秒的弧度值替換
// 第一步：畫(huà)出60個(gè)小格子代表分針/秒針刻度,每個(gè)刻度之間是6度
? // cxt.moveTo(200,200);
? // cxt.arc(200,200,150,0,6*Math.PI/180,false);
? // 整個(gè)鐘表一共360度，需要進(jìn)行60次台谊，用循環(huán)
? ? cxt.beginPath();
? ? for(var i = 0; i < 60; i ++){
? ? ? cxt.moveTo(200,200);
? ? ? cxt.arc(200,200,150,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
? ? ? cxt.stroke();
//此時(shí) 將出現(xiàn)一個(gè)圓盤(pán)上出現(xiàn)60個(gè)閉合的扇形角度為6度
? ? }
? ? cxt.beginPath();
//第二步：畫(huà)遮罩層
? // 用一個(gè)圓覆蓋到之前畫(huà)出分鐘/秒鐘刻度盤(pán)上屉凯，圓心相同绰筛，半徑小于原刻盤(pán)，
//制造出時(shí)中刻度的假象
? ? ? cxt.beginPath();
? ? ? cxt.fillStyle = '#fff';
? ? ? cxt.arc(200,200,140,0,360*Math.PI/180,false);
? ? ? cxt.fill();
? ? ? cxt.closePath();
//? ? 第三步：畫(huà)時(shí)針刻度
? ? // 同分鐘描融，整個(gè)表盤(pán)的分鐘刻度也是360度铝噩，分12個(gè)，每個(gè)刻度為30
? ? // 一共有12個(gè)30度
? ? cxt.beginPath();
? ? for(var i = 0; i? < 12; i ++){
? ? ? cxt.moveTo(200,200);
? ? ? cxt.lineWidth = 3;
? ? ? cxt.arc(200,200,150,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);
? ? ? cxt.stroke();
//此時(shí) 將出現(xiàn)一個(gè)圓盤(pán)上出現(xiàn)12個(gè)閉合的扇形角度為30度? 線寬為3
? ? ? ? }
? ? ? ? cxt.closePath();
? ? ? ? }
// 第四步：畫(huà)遮罩層
? ? //? 用一個(gè)圓覆蓋到之前畫(huà)出分鐘/秒鐘刻度盤(pán)上窿克，圓心相同骏庸，
? ? //? 半徑小于分鐘/秒鐘（原）遮罩層，制造出時(shí)中刻度的假象
? ? ? ? ? ? cxt.beginPath();
? ? ? ? ? ? cxt.fillStyle = '#fff';
? ? ? ? ? ? cxt.arc(200,200,130,0,360*Math.PI/180,false);
? ? ? ? ? ? cxt.fill();
? ? ? ? ? ? cxt.closePath();
? ? ? ? ? ? // 第五步：畫(huà)時(shí)針?lè)轴樏脶槪ㄐ袆?dòng)軌跡）
? ? ? ? // 圓心相同 半徑不同 年叮，起始弧度和終止弧度相等
? ? ? ? // 起始弧度與終止弧度的值有時(shí)間軸來(lái)決定
? ? ? ? ? ? // cxt.moveTo(200,200);
? ? ? ? ? ? // cxt.arc(200,200,150*0.5,起始弧度,終止弧度,false);
? ? ? ? ? ? // cxt.stroke();
? ? ? ? ? ? // 時(shí)針：最短最粗具被，
? ? ? ? cxt.beginPath();
? ? ? ? cxt.moveTo(200,200);
? ? ? ? cxt.lineWidth =4;
? ? ? ? cxt.arc(200,200,150*0.5,tHVal,tHVal,false);
? ? ? ? cxt.stroke();
? ? ? ? cxt.closePath();
? ? ? ? //? ? 畫(huà)分針
? ? cxt.beginPath();
? ? cxt.moveTo(200,200);
? ? cxt.lineWidth =3;
? ? cxt.arc(200,200,150*0.7,tMVal,tMVal,false);
? ? cxt.stroke();
? ? cxt.closePath();
? ? //? ? 畫(huà)秒針
? ? cxt.beginPath();
? ? cxt.moveTo(200,200);
? ? cxt.lineWidth =2;
? ? cxt.arc(200,200,150*0.7,tSVal,tSVal,false);
? ? cxt.stroke();
? ? cxt.closePath();
? ? ? ? }
? ? ? ? toDrow();
? ? ? ? //定時(shí)器
etInterval(toDrow,1000);
插入圖片
cxt.drawImage(obj,x,y)
參數(shù)：
三個(gè)參數(shù)
1.obj:要插入的圖片對(duì)象
2.x/y：代表插入圖片在畫(huà)布上的位置（x，y）
語(yǔ)法：
cxt.drawImage(obj,x,y)
五個(gè)參數(shù)的是時(shí)候
cxt.drawImage(obj,x,y,w,h)
w/h:代表在畫(huà)布上定位圖片并設(shè)置照片的大小
不設(shè)置寬高只损，默認(rèn)為圖片自身寬高
九個(gè)參數(shù)代表
? ? ? cxt.drawImage(obj,sx,sy,sw,sh,x,y,w,h)
sx/sy: 要剪切圖片的位置
sw/sh：剪切的大小
x/y:在畫(huà)布的位置
w/h：圖片的大小
createPattern(obj,是否重復(fù)):設(shè)置背景
? repeat:默認(rèn)重復(fù)
? repeat-x：x軸重復(fù)
? repeat-y：y軸重復(fù)
? no-repeat：不重復(fù)
window.onload = function(){
? ? ? ? ? ? var oC = document.getElementById('c1');
? ? ? ? ? ? var cxt = oC.getContext('2d');
? ? ? ? ? ? //創(chuàng)建圖片對(duì)象
? ? ? ? ? ? var oImg = new Image();
? ? ? ? ? ? //圖片路徑
? ? ? ? ? ? oImg .src = 'img/life.jpg';
? ? ? ? ? ? //當(dāng)圖片加載完成以后執(zhí)行操作
? ? ? ? ? ? oImg.onload = function(){
? ? ? ? ? ? ? ? //圖片插入canvas畫(huà)布中
? ? ? ? ? ? ? ? cxt.drawImage(oImg,50,80)
? ? ? ? ? ? }
? ? ? ? }
效果
平鋪：
window.onload = function(){
? ? ? ? ? ? var oC = document.getElementById('c1');
? ? ? ? ? ? var cxt = oC.getContext('2d');
? ? ? ? ? ? //創(chuàng)建圖片對(duì)象
? ? ? ? ? ? var oImg = new Image();
? ? ? ? ? ? //圖片路徑
? ? ? ? ? ? oImg .src = 'img/life.jpg';
? ? ? ? ? ? //當(dāng)圖片加載完成以后執(zhí)行操作
? ? ? ? ? ? oImg.onload = function(){
? ? ? ? ? ? ? ? //圖片插入canvas畫(huà)布中
? ? ? ? ? ? ? ? cxt.drawImage(oImg,0,0);
? ? ? ? ? ? ? ? var bg = cxt.createPattern(oImg,'repeat');
? ? ? ? ? ? ? ? //createPattern(obj,是否重復(fù)):設(shè)置背景
? ? ? ? ? ? ? ? ? //repeat:默認(rèn)重復(fù)
? ? ? ? ? ? ? ? ? //repeat-x：x軸重復(fù)
? ? ? ? ? ? ? ? ? // repeat-y：y軸重復(fù)
? ? ? ? ? ? ? ? ? // no-repeat：不重復(fù)
? ? ? ? ? ? ? cxt.fillStyle = bg;
? ? ? ? ? ? ? cxt.fillRect(0,0,oC.width,oC.height);
? ? ? ? ? ? }
? ? ? ? }
效果：
剪裁：（剪裁圖片不能設(shè)置平鋪效果
window.onload = function(){
? ? ? ? ? ? var oC = document.getElementById('c1');
? ? ? ? ? ? var cxt = oC.getContext('2d');
? ? ? ? ? ? //創(chuàng)建圖片對(duì)象
? ? ? ? ? ? var oImg = new Image();
? ? ? ? ? ? //圖片路徑
? ? ? ? ? ? oImg .src = 'img/life.jpg';
? ? ? ? ? ? //當(dāng)圖片加載完成以后執(zhí)行操作
? ? ? ? ? ? oImg.onload = function(){
? ? ? ? ? ? ? ? //圖片插入canvas畫(huà)布中
? ? ? ? ? ? ? ? //cxt.drawImage(obj,sx,sy,sw,sh,x,y,w,h)
? ? ? ? ? ? ? ? //sx/sy: 要剪切圖片的位置
? ? ? ? ? ? ? ? //sw/sh：剪切的大小一姿，這個(gè)區(qū)域的圖片舍棄
? ? ? ? ? ? ? ? //x/y:在畫(huà)布的位置
? ? ? ? ? ? ? ? // w/h：圖片的大小
? ? ? ? ? ? ? ? cxt.drawImage(oImg,30,50,100,200,200,100,200,200);
? ? ? ? ? ? }
? ? ? ? }
效果：
案例：
圖片旋轉(zhuǎn)：
分析：
第一步：
向畫(huà)布插入圖片
var oImg = new Image();//調(diào)用方法
oImg.src = "img/life.jpg";//圖片路徑
//設(shè)置canvas畫(huà)布與圖片大小一致
? oImg.onload = function() {//圖片預(yù)加載，當(dāng)圖片加載完成再執(zhí)行canvas
? ? ? ? ? ? cxt.drawImage(oImg,0,0,500,300);
? ? ? ? }
第二步：
設(shè)置旋轉(zhuǎn)角度
window.onload = function(){
????????var aInput = document.getElementsByTagName
? ? ? ? ("input");
? ? ? ? var oC = document.getElementById("c1");
? ? ? ? var cxt = oC.getContext("2d");
????????var? i = 0;
? ? ? ? var iNow = 0;
? ? ? ? // 向畫(huà)布插入圖片
? ? ? ? var oImg = new Image();
? ? ? ? oImg.src = "img/life.jpg";
? ? ? ? oImg.onload = function() {
? ? ? ? ? ? cxt.drawImage(oImg,0,0,500,300);
? ? ? ? }
????????// switch? 語(yǔ)句開(kāi)始
? ? ? ? aInput[0].onclick = function() {
? ? ? ? ? ? if(iNow==0) {
? ? ? ? ? ? ? ? iNow = 3;
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? iNow--;
? ? ? ? ? ? }
? ? ? ? ? toRotate();
? ? ? ? }
? ? ? ? aInput[1].onclick = function() {
? ? ? ? ? ? // 執(zhí)行順時(shí)針旋轉(zhuǎn)圖片
? ? ? ? ? ? // 當(dāng)i= 1 第一次旋轉(zhuǎn) 旋轉(zhuǎn)90度
? ? ? ? ? ? if(iNow==3) {
? ? ? ? ? ? ? ? iNow = 0;
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? iNow++;
? ? ? ? ? ? }
? ? ? ? ? toRotate();
? ? ? ? }
? ? ? ? function toRotate() {
? ? ? ? ? ? switch(iNow) {
? ? ? ? ? ? ? ? case 1:
? ? ? ? ? ? ? ? ? ? oC.width = oImg.height;
? ? ? ? ? ? ? ? ? ? oC.height = oImg.width;
? ? ? ? ? ? ? ? ? ? cxt.rotate(90*Math.PI/180);
? ? ? ? ? ? ? ? ? ? cxt.drawImage(oImg,0,-oImg.height);
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 2:
? ? ? ? ? ? ? ? ? ? oC.width = oImg.width;
? ? ? ? ? ? ? ? ? ? oC.height = oImg.height;
? ? ? ? ? ? ? ? ? ? cxt.rotate(180*Math.PI/180);
? ? ? ? ? ? ? ? ? ? cxt.drawImage(oImg,-oImg.width,-oImg.height);
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 3:
? ? ? ? ? ? ? ? ? ? oC.width = oImg.height;
? ? ? ? ? ? ? ? ? ? oC.height = oImg.width;
? ? ? ? ? ? ? ? ? ? cxt.rotate(270*Math.PI/180);
? ? ? ? ? ? ? ? ? ? cxt.drawImage(oImg,-oImg.width,0);
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 0:
? ? ? ? ? ? ? ? ? ? oC.width = oImg.width;
? ? ? ? ? ? ? ? ? ? oC.height = oImg.height;
? ? ? ? ? ? ? ? ? ? cxt.rotate(0*Math.PI/180);
? ? ? ? ? ? ? ? ? ? cxt.drawImage(oImg,0,0);
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? }
漸變
A: 創(chuàng)建線性漸變
creatLinearGradient(x1,y1,x2,y2)
? 參數(shù)
? x1：起始坐標(biāo)x軸
? y1：起始坐標(biāo)y軸
? x2: 終止坐標(biāo)x軸
? y2：終止坐標(biāo)y軸
? 給漸變對(duì)象添加顏色 addColorStop()
? ? 接收兩個(gè)參數(shù)
? ? 第一個(gè)參數(shù) 規(guī)定漸變的位置
? ? 第二個(gè)參數(shù) 漸變的顏色
? ? 語(yǔ)法： addColorStop(0,'red');
// A實(shí)例
? ? ? ? //創(chuàng)建漸變對(duì)象
? ? ? ? var grad = cxt.createLinearGradient(100,100,300,300);
? ? ? ? // 給漸變對(duì)象添加顏色
? ? ? ? grad.addColorStop(0,'#f00');
? ? ? ? grad.addColorStop(0.3,'#e12');
? ? ? ? grad.addColorStop(1,'#f1e');
? ? ? ? // 將漸變對(duì)象賦值給fillStyle并創(chuàng)建一圖形
? ? ? ? cxt.fillStyle = grad;
? ? ? ? cxt.fillRect(0,0,oC.width,oC.height);
效果：
B:創(chuàng)建徑向漸變? createRadialGradient(x1,y1,r1,x2,y2,r2) x1/y1:起始位置坐標(biāo)
x2/y2:結(jié)束位置坐標(biāo)
r1/r2: 開(kāi)始結(jié)束的半徑
? ? // 創(chuàng)建一個(gè)徑向漸變
? ? var? grad = cxt.createRadialGradient(200,200,50,200,200,100) ;
? ? // 給徑向漸變對(duì)象添加顏色
? ? grad.addColorStop(0,'purple');
? ? grad.addColorStop(1,'blue');
? ? // 把樣式賦值給fillStyle
? ? cxt.fillStyle = grad;
? ? // 創(chuàng)建一個(gè)圖形
? ? cxt.fillRect(0,0,oC.width,oC.height);
文本
cxt.strokeText('文本內(nèi)容',x,y);
參數(shù)：
x,y:文本位置坐標(biāo)
cxt.fillText('明天',200,300)跃惫；
var oC = document.getElementById('c1');
var cxt = oC.getContext('2d');
cxt.fillText('明天',200,300);
效果;
var oC = document.getElementById('c1');
var cxt = oC.getContext('2d');
cxt.fillStyle ='yellow';//字體顏色
cxt.fillText('明天',200,300);
效果：
var oC = document.getElementById('c1');
var cxt = oC.getContext('2d');
cxt.fillStyle ='yellow';
cxt.font = 'italic bold 100px? impact';//字體 傾斜加粗字號(hào)100px
cxt.fillText('明天',200,300);
效果：
var oC = document.getElementById('c1');
var cxt = oC.getContext('2d');
cxt.strokeText('你好',200,300);
效果：
var oC = document.getElementById('c1');
var cxt = oC.getContext('2d');
cxt.strokeStyle=‘orange';
cxt.strokeText('你好',200,300);
效果：
var oC = document.getElementById('c1');
var cxt = oC.getContext('2d');
cxt.strokeStyle=‘orange';
cxt.font = 'italic bold 100px? impact';//字體 傾斜加粗字號(hào)100px
cxt.strokeText('你好',200,300);
效果：
var oC = document.getElementById('c1');
var cxt = oC.getContext('2d');
cxt.strokeStyle='orange';
cxt.font = 'italic bold 100px? impact';//字體 傾斜加粗字號(hào)100px
cxt.strokeText('你好',100,100);
cxt.fillStyle ='yellow';
cxt.fillText('明天',200,300);
效果：
var oC = document.getElementById('c1');
var cxt = oC.getContext('2d');
var? grad = cxt.createLinearGradient(250,300,400,500);
grad.addColorStop(0,'#fc3');
? ? ? ? ? ? grad.addColorStop(0.3,'#12fc');
? ? ? ? ? ? grad.addColorStop(1,'#10fc');
? ? ? ? ? ? cxt.font = 'italic bold 100px? impact';
? ? ? ? ? ? cxt.fillStyle = grad;
? ? ? ? ? ? cxt.fillText('明天',200,300)
效果：
var oC = document.getElementById('c1');
var cxt = oC.getContext('2d');
cxt.strokeStyle='orange';
cxt.font = 'italic bold 100px? impact';//字體 傾斜加粗字號(hào)100px
var? grad = cxt.createRadialGradient(100,100,100,150,150,200);
// 給徑向漸變對(duì)象添加顏色
grad.addColorStop(0,'#fc3');
grad.addColorStop(0.3,'#12fc');
grad.addColorStop(1,'#10fc');
cxt.strokeText('你好',100,100);
cxt.fillText('明天',200,300);
var? grad = cxt.createRadialGradient(100,100,100,150,150,200);
// 給徑向漸變對(duì)象添加顏色
grad.addColorStop(0,'#fc3');
grad.addColorStop(0.3,'#12fc');
grad.addColorStop(1,'#10fc');
// 把樣式賦值給fillStyle
cxt.strokeStyle = grad;
cxt.strokeText('你好',100,100);
效果：
陰影
創(chuàng)建陰影
cxt.shadowOffsetX:陰影x軸偏移量 叮叹，
可以為負(fù)值，正值向右爆存，負(fù)值向左偏移
cxt.shadowOffsetY:陰影x軸偏移量 衬横，
可以為負(fù)值，正值向下终蒂，負(fù)值向上偏移
cxt.shadowBlur:陰影的模糊值,值越大，
模糊度越強(qiáng)
cxt.shadowColor：陰影的顏色
var oC = document.getElementById('c1');
var cxt = oC.getContext('2d');
cxt.shadowOffsetX ='20';//陰影x軸偏移量
cxt.shadowOffsetY = '10'//陰影x軸偏移量
cxt.shadowBlur = '10';//陰影的模糊值
cxt.shadowColor ='red';//陰影的顏色
cxt.fillRect(100,100,100,100);
效果：
var oC = document.getElementById('c1');
var cxt = oC.getContext('2d');
var? grad = cxt.createRadialGradient(100,100,100,150,150,200);
// 給徑向漸變對(duì)象添加顏色
grad.addColorStop(0,'#fc3');
grad.addColorStop(0.3,'#12fc');
grad.addColorStop(1,'#10fc');
cxt.shadowOffsetX ='20';
cxt.shadowOffsetY = '10'
cxt.shadowBlur = '10';
cxt.shadowColor ='red'
// 把樣式賦值給fillStyle
cxt.strokeStyle = grad;
cxt.strokeText('你好',100,100);
像素：
oCxt.getImageData(x,y,w,h);
返回一個(gè)圖像對(duì)象遥诉，這個(gè)對(duì)象包含了這個(gè)圖像的像素信息
參數(shù)：
x/y:獲取像素點(diǎn)的坐標(biāo)位置
w/h：獲取圖像的寬高
createImageData(w,h)創(chuàng)建圖像
參數(shù)：
w:創(chuàng)建圖像的寬
h:創(chuàng)建圖像的高?
putImageData(imgData,x,y,w,h)將像素放入畫(huà)布中拇泣、
參數(shù)：創(chuàng)建的像素
x/y:像素坐標(biāo)
w/h：像素大小
練習(xí)：創(chuàng)建一個(gè)100*100的圖像 ，紅色矮锈，255,0,,0,255
? var oC = document.getElementById('c1');
? var oCxt = oC.getContext('2d');
? var imgData = oCxt.createImageData(100,100);
? for(var? i =0; i<imgData.data.length;i++){
// 把每個(gè)像素的四個(gè)值都要賦值成紅色對(duì)應(yīng)的rgba
? ? ? ? //rgba? 紅綠藍(lán)透明度 每4個(gè)值代表一個(gè)像素
? ? ? ? imgData.data[4*i]='255';
? ? ? ? imgData.data[4*i+1]='0';
? ? ? ? imgData.data[4*i+2]='0';
? ? ? ? imgData.data[4*i+3]='255';
? ? ? ? }
? ? ? ? //放入畫(huà)布
? oCxt.putImageData(imgData,200,200)
效果：
measure：
? measureText();
? 語(yǔ)法：mearsureText('測(cè)量的文本').wdith;
? ? ? ? 測(cè)量文本的寬度/密度
? ? ? ? 把文字水平居中的方式
? ? ? ? x軸坐標(biāo)（畫(huà)布的寬- 字體的寬）/2
練習(xí)：將‘往后余生’水平居中
var oC = document.getElementById('c1');
var cxt = oC.getContext('2d');
var str? = '往后余生';
cxt.font ='bold 100px impact';
var cX = (oC.width - cxt.measureText(str).width)/2;
cxt.fillText(str,cX,100);
效果：
至此霉翔，canvas的一些知識(shí)也介紹的差不多了，中間有一些案例供大家參考苞笨，說(shuō)的有些啰嗦债朵，適合初學(xué)者，希望對(duì)大家有一些幫助吧瀑凝！
