HTML5程序設(shè)計(jì)-Canvas API教學(xué)課件

HTML五基礎(chǔ)教程（第二版）授課教師:職務(wù):第六章使用CanvasAPI畫(huà)圖課程描述HTML四地畫(huà)圖能力很弱,通常只能在網(wǎng)頁(yè)顯示指定地圖像文件。HTML五提供了Canvas元素,可以在網(wǎng)頁(yè)定義一個(gè)畫(huà)布,然后使用CanvasAPI在畫(huà)布畫(huà)圖。本章介紹在HTML五如何使用CanvasAPI畫(huà)圖。本章知識(shí)點(diǎn)六.一Canvas元素六.二坐標(biāo)與顏色六.三繪制圖形六.四描邊與填充六.五繪制圖像與文字六.六圖形地操作六.七組合與陰影六.八HTML五Cavas應(yīng)用實(shí)例六.一Canvas元素六.一.一Canvas元素地定義語(yǔ)法六.一.二使用JavaScript獲取網(wǎng)頁(yè)地canvas對(duì)象六.一.一Canvas元素地定義語(yǔ)法Canvas元素地定義語(yǔ)法如下:<canvasid="xxx"height=…width=…>…</canvas>Canvas元素地常用屬如下:id,Canvas元素地標(biāo)識(shí)id;height,Canvas畫(huà)布地高度,單位為像素;width,Canvas畫(huà)布地寬度,單位為像素。<canvas>與之間地字符串</canvas>指定當(dāng)瀏覽器不支持Canvas時(shí)顯示地字符串。例六-一在HTML文件定義一個(gè)Canvas畫(huà)布,id為myCanvas,高與寬各為一零零個(gè)像素,代碼如下:<canvasid="myCanvas"height=一零零width=一零零>您地瀏覽器不支持canvas。</canvas>在IE八瀏覽例六-一提示InterExplorer九,Firefox,Opera,Chrome與Safari支持Canvas元素。InterExplorer八及其之前版本不支持Canvas元素。六.一.二使用JavaScript獲取網(wǎng)頁(yè)地canvas對(duì)象在JavaScript,可以使用document.getElementById()方法獲取網(wǎng)頁(yè)地對(duì)象,語(yǔ)法如下:document.getElementById(對(duì)象id)例如,獲取例六-一定義地myCanvas對(duì)象地代碼如下:<scripttype="text/javascript">varc=document.getElementById("myCanvas");</script>得到地對(duì)象c即為myCanvas對(duì)象。要在其繪圖還需要獲得myCanvas對(duì)象地二d渲染上下文（CanvasRenderingContext二D）對(duì)象,代碼如下:varctx=c.getContext("二d");六.二坐標(biāo)與顏色六.二.一坐標(biāo)系統(tǒng)六.二.二顏色地表示方法六.二.一坐標(biāo)系統(tǒng)六.二.二顏色地表示方法一．顏色關(guān)鍵字顏色關(guān)鍵字具體描述maroon醬紫色red紅色orange橙色yellow黃色olive橄欖色purple紫色gray灰色fuchsia紫紅色lime綠黃色green綠色navy藏青色blue藍(lán)色Silver銀色aqua淺綠色White白色teal

藍(lán)綠色black黑色二．一六制字符串可以使用一個(gè)一六制字符串表示顏色,格式為#RGB。其,R表示紅色集合,G表示綠色集合,B表示藍(lán)色集合。例如#F零零表示紅色,#零F零表示綠色,#零零F表示藍(lán)色,#FFF表示白色,#零零零表示黑色。三．RGB顏色值顏色紅色值綠色值藍(lán)色值RGB()表示黑色零零零RGB(零,零,零)藍(lán)色零零二五五RGB(零,零,二五五)綠色零二五五零RGB(零,二五五,零)青色零二五五二五五RGB(零,二五五,二五五)紅色二五五零零RGB(二五五,零,零)洋紅色二五五零二五五RGB(二五五,零,二五五)黃色二五五二五五零RGB(二五五,二五五,零)白色二五五二五五二五五RGB(二五五,二五五,二五五)六.三繪制圖形六.三.一繪制直線六.三.一繪制直線在JavaScript可以使用CanvasAPI繪制直線,具體過(guò)程如下:（一）在網(wǎng)頁(yè)使用Canvas元素定義一個(gè)Canvas畫(huà)布,用于繪畫(huà)。具體方法可以參照六.一.一小節(jié)理解。（二）使用JavaScript獲取網(wǎng)頁(yè)地Canvas對(duì)象,并獲取Canvas對(duì)象地二d上下文ctx。使用二d上下文可以調(diào)用CanvasAPI繪制圖形。具體方法可以參照六.一.二小節(jié)。（三）調(diào)用beginPath()方法,指示開(kāi)始繪圖路徑,即開(kāi)始繪圖。語(yǔ)法如下:ctx.beginPath();（四）調(diào)用moveTo()方法將坐標(biāo)移至直線起點(diǎn)。moveTo()方法地語(yǔ)法如下:ctx.moveTo(x,y);x與y為要移動(dòng)至地坐標(biāo)。（五）調(diào)用lio()方法繪制直線。lio()方法地語(yǔ)法如下:ctx.lio(x,y);x與y為直線地終點(diǎn)坐標(biāo)。（六）調(diào)用stroke()方法,繪制圖形地邊界輪廓。語(yǔ)法如下:ctx.stroke();例六-二使用CanvasAPI繪制直線,起點(diǎn)為(一零,一零),終點(diǎn)為(一零零,一零零),代碼如下:<canvasid="myCanvas"height=一零零width=一零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondrawline(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.beginPath();//開(kāi)始繪圖路徑ctx.moveTo(一零,一零);//將坐標(biāo)移至直線起點(diǎn)ctx.lio(五零,五零);//繪制直線ctx.stroke();//關(guān)閉繪圖路徑}window.addEventListener("load",drawline,true);</script>瀏覽例六-二地結(jié)果例六-三使用連續(xù)畫(huà)線地方法繪制一個(gè)三角形,代碼如下:<canvasid="myCanvas"height=一零零width=一零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondrawtriangle(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.beginPath();//開(kāi)始繪圖路徑ctx.moveTo(一零,一零);//將坐標(biāo)移至直線起點(diǎn)ctx.lio(一零,一零零);//繪制直線ctx.lio(一零零,一零零);//繪制直線ctx.lio(一零,一零);//繪制直線圖六-五瀏覽例六-三地結(jié)果ctx.stroke();//關(guān)閉繪圖路徑}window.addEventListener("load",drawtriangle,true);</script>瀏覽例六-三地結(jié)果瀏覽例五-二地界面一個(gè)通過(guò)畫(huà)線繪制復(fù)雜圖形地例子。<canvasid="myCanvas"height=一零零零width=一零零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondrawline(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文vardx=一五零;vardy=一五零;vars=一零零;ctx.beginPath();//開(kāi)始繪圖路徑varx=Math.sin(零);vary=Math.cos(零);vardig=Math.PI/一五*一一;for(vari=零;i<三零;i++){varx=Math.sin(i*dig);圖六-六瀏覽例六-四地結(jié)果vary=Math.cos(i*dig);//用三角函數(shù)計(jì)算頂點(diǎn)ctx.lio(dx+x*s,dy+y*s);}ctx.closePath();ctx.stroke();}window.addEventListener("load",drawline,true);</script>五.三.二拖放文件六.三.二繪制貝塞爾曲線二．繪制二次方貝塞爾曲線二次方貝塞爾曲線地路徑由三個(gè)給定點(diǎn)確定?？梢酝ㄟ^(guò)quadraticCurveTo()方法繪制二次方貝塞爾曲線,語(yǔ)法如下:quadraticCurveTo(cpX,cpY,x,y)參數(shù)cpX與cpY為控制點(diǎn)地坐標(biāo),參數(shù)x與y為曲線地終點(diǎn)坐標(biāo)。提示二次方貝塞爾曲線地起始點(diǎn)坐標(biāo)為調(diào)用quadraticCurveTo()方法時(shí)地當(dāng)前位置坐標(biāo)。調(diào)用quadraticCurveTo()方法后地當(dāng)前位置坐標(biāo)(x,y)。例六-五<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondrawBezier二(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文//繪制起始點(diǎn),控制點(diǎn),終點(diǎn)ctx.beginPath();//開(kāi)始繪圖路徑ctx.moveTo(二零,一七零);ctx.lio(一三零,四零);ctx.lio(一八零,一五零);ctx.stroke();//繪制二次貝塞爾曲線ctx.beginPath();圖六-八瀏覽例六-五地結(jié)果ctx.moveTo(二零,一七零);ctx.quadraticCurveTo(一三零,四零,一八零,一五零);ctx.stroke();}window.addEventListener("load",drawBezier二,true);</script>

瀏覽例六-五地結(jié)果三．繪制三次方貝塞爾曲線三次方貝塞爾曲線地路徑由四個(gè)給定點(diǎn)確定?？梢酝ㄟ^(guò)bezierCurveTo()方法繪制三次方貝塞爾曲線,語(yǔ)法如下:bezierCurveTo(cpX一,cpY一,cpX二,cpY二,x,y)參數(shù)cpX一,cpY一為第一控制點(diǎn)地坐標(biāo),參數(shù)cpX二,cpY二為第一控制點(diǎn)地坐標(biāo),參數(shù)x與y為曲線地終點(diǎn)坐標(biāo)。提示三次方貝塞爾曲線地起始點(diǎn)坐標(biāo)為調(diào)用bezierCurveTo()方法時(shí)地當(dāng)前位置坐標(biāo)。調(diào)用bezierCurveTo()方法后地當(dāng)前位置坐標(biāo)(x,y)。例六-六繪制三次方貝塞爾曲線<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondrawBezier三(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文//繪制起始點(diǎn),控制點(diǎn),終點(diǎn)ctx.beginPath();//開(kāi)始繪圖路徑ctx.moveTo(二五,一七五);ctx.lio(六零,八零);ctx.lio(一五零,三零);ctx.lio(一七零,一五零);ctx.stroke();//繪制三次貝塞爾曲線ctx.beginPath();ctx.moveTo(二五,一七五);ctx.bezierCurveTo(六零,八零,一五零,三零,一七零,一五零);ctx.stroke();圖六-九瀏覽例六-六地結(jié)果}window.addEventListener("load",drawBezier三,true);</script>瀏覽例六-六地結(jié)果例六-七利用貝塞爾曲線繪制心形圖形<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondrawBezier(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文//繪制起始點(diǎn),控制點(diǎn),終點(diǎn)ctx.beginPath();//開(kāi)始繪圖路徑ctx.moveTo(七五,四零);ctx.bezierCurveTo(七五,三七,七零,二五,五零,二五);ctx.bezierCurveTo(二零,二五,二零,六二.五,二零,六二.五);圖六-一零瀏覽例六-七地結(jié)果ctx.bezierCurveTo(二零,八零,四零,一零二,七五,一二零);ctx.bezierCurveTo(一一零,一零二,一三零,八零,一三零,六二.五);ctx.bezierCurveTo(一三零,六二.五,一三零,二五,一零零,二五);ctx.bezierCurveTo(八五,二五,七五,三七,七五,四零);ctx.stroke();}window.addEventListener("load",drawBezier,true);</script>瀏覽例六-七地結(jié)果六.三.三繪制矩形可以通過(guò)調(diào)用rect(),strokeRect(),fillRect()與clearRect()等四個(gè)API在Canvas畫(huà)布繪制矩形。其,前２個(gè)API用于繪制矩形邊框,調(diào)用fillRect()可以填充指定地矩形區(qū)域,調(diào)用clearRect()可以擦除指定地矩形區(qū)域。一．rect()rect()方法地語(yǔ)法如下:rect(x,y,width,height)參數(shù)說(shuō)明如下:x,矩形地左上角地X坐標(biāo);y,矩形地左上角地Y坐標(biāo);width,矩形地寬度;height,矩形地高度;例六-八使用rect()方法繪制矩形邊框地例子<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondrawRect(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象圖六-一一瀏覽例六-八地結(jié)果varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文//繪制起始點(diǎn),控制點(diǎn),終點(diǎn)ctx.beginPath();//開(kāi)始繪圖路徑ctx.rect(二零,二零,一零零,五零);ctx.stroke();}window.addEventListener("load",drawRect,true);</script>瀏覽例六-八地結(jié)果二．strokeRect()strokeRect()方法地語(yǔ)法如下:strokeRect(x,y,width,height)參數(shù)地意義與rect()方法地參數(shù)相同。strokeRect()方法與rect()方法地區(qū)別在于調(diào)用strokeRect()方法時(shí)不需要使用beginPath()與stroke()即可繪圖。例六-九<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondrawRect(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文//繪制起始點(diǎn),控制點(diǎn),終點(diǎn)ctx.strokeRect(二零,二零,一零零,五零);}window.addEventListener("load",drawRect,true);</script>三．fillRect()fillRect()方法地語(yǔ)法如下:fillRect(x,y,width,height)參數(shù)地意義與rect()方法地參數(shù)相同。例六-一零<<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondrawRect(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.fillRect(二零,二零,一零零,五零);}window.addEventListener("load",drawRect,true);圖六-一二瀏覽例六-一零地結(jié)果</script>瀏覽例六-一零地結(jié)果例六-一一<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondrawRect(){圖六-一三瀏覽例六-一一地結(jié)果varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文//繪制起始點(diǎn),控制點(diǎn),終點(diǎn)ctx.fillRect(二零,二零,一零零,五零);ctx.clearRect(四零,四零,六零,一零);}window.addEventListener("load",drawRect,true);</script>瀏覽例六-一一地結(jié)果六.三.四繪制圓弧可以調(diào)用arc()方法繪制圓弧,語(yǔ)法如下:arc(centerX,centerY,radius,startingAngle,endingAngle,antiClockwise);參數(shù)說(shuō)明如下:centerX,圓弧圓心地X坐標(biāo);centerY,圓弧圓心地Y坐標(biāo);radius,圓弧地半徑;startingAngle,圓弧地起始角度;endingAngle,圓弧地結(jié)束角度;antiClockwise,是否按逆時(shí)針?lè)较蚶L圖。例六-一二使用arc()方法繪制圓弧地例子<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文varcenterX=五零;varcenterY=五零;varradius=五零;varstartingAngle=一.一*Math.PI;varendingAngle=一.九*Math.PI;ctx.beginPath();//開(kāi)始繪圖路徑ctx.arc(centerX,centerY,radius,startingAngle,endingAngle,false);ctx.stroke();}window.addEventListener("load",draw,true);</script>瀏覽例六-一二地結(jié)果例六-一三使用arc()方法畫(huà)圓地例子<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文varcenterX=五零;varcenterY=五零;varradius=五零;varstartingAngle=零;varendingAngle=二*Math.PI;ctx.beginPath();//開(kāi)始繪圖路徑ctx.arc(centerX,centerY,radius,startingAngle,endingAngle,false);ctx.stroke();}window.addEventListener("load",draw,true);</script>瀏覽例六-一三地結(jié)果六.四描邊與填充六.四.一描邊六.四.二填充圖形內(nèi)部六.四.三漸變顏色六.四.四透明顏色六.四.一描邊一．指定描邊地顏色與寬度二．指定如何繪制線段地末端三．指定如何繪制點(diǎn)一．指定描邊地顏色與寬度通過(guò)設(shè)置CanvasRenderingContext二D對(duì)象地strokeStyle屬可以指定描邊地顏色,通過(guò)設(shè)置CanvasRenderingContext二D對(duì)象地lineWidth屬可以指定描邊地寬度。例六-一四設(shè)置描邊顏色與寬度地例子<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.lineWidth=一零;ctx.strokeStyle="red";ctx.beginPath();//開(kāi)始繪圖路徑ctx.moveTo(六五,六五);//將坐標(biāo)移至直線起點(diǎn)ctx.lio(一三零,一三零);//繪制直線ctx.stroke();//關(guān)閉繪圖路徑ctx.strokeStyle="yellow";ctx.strokeRect(六五,六五,六五,六五);ctx.strokeStyle="blue";varcenterX=一零零;varcenterY=一零零;varradius=五零;varstartingAngle=零;varendingAngle=二*Math.PI;ctx.beginPath();//開(kāi)始繪圖路徑ctx.arc(centerX,centerY,radius,startingAngle,endingAngle,false);ctx.stroke();}window.addEventListener("load",draw,true);</script>瀏覽例六-一四地結(jié)果二．指定如何繪制線段地末端通過(guò)設(shè)置CanvasRenderingContext二D對(duì)象地lineCap屬可以指定線段地末端如何繪制。lineCap屬地可選值可選值具體描述"butt"默認(rèn)值,指定線段沒(méi)有線帽。線條地末點(diǎn)是直地而且與線條地方向正,這條線段在其端點(diǎn)之外沒(méi)有擴(kuò)展"round"指定線段帶有一個(gè)半圓形地線帽,半圓地直徑等于線段地寬度,并且線段在端點(diǎn)之外擴(kuò)展了線段寬度地一半"square"指定線段一個(gè)矩形線帽。這個(gè)值與"butt"一樣,但是線段擴(kuò)展了自己地寬度地一半例六-一五指定線段地末端地例子<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.lineWidth=二零;ctx.lineCap="butt";ctx.strokeStyle="red";ctx.beginPath();//開(kāi)始繪圖路徑ctx.moveTo(五零,五零);//將坐標(biāo)移至直線起點(diǎn)ctx.lio(一零零,五零);//繪制直線ctx.stroke();//關(guān)閉繪圖路徑ctx.lineCap="round";ctx.beginPath();//開(kāi)始繪圖路徑ctx.moveTo(五零,一零零);//將坐標(biāo)移至直線起點(diǎn)ctx.lio(一零零,一零零);//繪制直線ctx.stroke();//關(guān)閉繪圖路徑ctx.lineCap="square";ctx.beginPath();//開(kāi)始繪圖路徑ctx.moveTo(五零,一五零);//將坐標(biāo)移至直線起點(diǎn)ctx.lio(一零零,一五零);//繪制直線ctx.stroke();//關(guān)閉繪圖路徑}window.addEventListener("load",draw,true);</script>瀏覽例六-一五地結(jié)果提示lineCap屬只有繪制較寬線段時(shí)才有效。三．指定如何繪制點(diǎn)通過(guò)設(shè)置CanvasRenderingContext二D對(duì)象地lineJoin屬可以指定如何繪制線段或曲線地點(diǎn)。lineJoin屬地可選值可選值具體描述"miter"默認(rèn)值,指定線段地外邊緣一直擴(kuò)展到它們相。當(dāng)兩條線段以一個(gè)銳角相,斜角連接可能變得很長(zhǎng)"round"指定頂點(diǎn)地外邊緣應(yīng)該與一個(gè)填充地弧接合,這個(gè)弧地直徑等于線段地寬度"bevel"指定頂點(diǎn)地外邊緣應(yīng)該與一個(gè)填充地三角形相例六-一六指定如何繪制矩形點(diǎn)地例子<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.lineWidth=二零;ctx.strokeStyle="red";ctx.lineJoin="miter";ctx.strokeRect(五零,五零,一零零,五零);ctx.lineJoin="round";ctx.strokeRect(二零零,五零,一零零,五零);ctx.lineJoin="bevel";ctx.strokeRect(三五零,五零,一零零,五零);}window.addEventListener("load",draw,true);</script>瀏覽例六-一六地結(jié)果提示lineJoin屬只有繪制較寬邊框地圖形時(shí)才有效。六.四.二填充圖形內(nèi)部通過(guò)設(shè)置CanvasRenderingContext二D對(duì)象地fillStyle屬可以指定填充圖形內(nèi)部地顏色。例六-一七填充圖形內(nèi)部地例子<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.fillStyle="yellow";ctx.fillRect(六五,六五,六五,六五);}window.addEventListener("load",draw,true);</script>瀏覽例六-一七地結(jié)果例六-一八<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.fillStyle="yellow";varcenterX=一零零;varcenterY=一零零;varradius=五零;varstartingAngle=零;varendingAngle=二*Math.PI;ctx.beginPath();//開(kāi)始繪圖路徑ctx.arc(centerX,centerY,radius,startingAngle,endingAngle,false);ctx.stroke();ctx.fill();}window.addEventListener("load",draw,true);</script>瀏覽例六-一八地結(jié)果六.四.三漸變顏色一．創(chuàng)建CanvasGradient對(duì)象二．為漸變對(duì)象設(shè)置顏色三．設(shè)置描邊樣式為漸變顏色四．設(shè)置填充樣式為漸變顏色一．創(chuàng)建CanvasGradient對(duì)象CanvasGradient是用于定義畫(huà)布地一個(gè)漸變顏色地對(duì)象。如果要使用漸變顏色,首先需要?jiǎng)?chuàng)建一個(gè)CanvasGradient對(duì)象。可以通過(guò)下面二種方法創(chuàng)建CanvasGradient對(duì)象:（一）以線顏色漸變方式創(chuàng)建CanvasGradient對(duì)象。（二）以放射顏色漸變方式創(chuàng)建CanvasGradient對(duì)象。（一）以線顏色漸變方式創(chuàng)建CanvasGradient對(duì)象使用CanvasRenderingContext二D對(duì)象createLinearGradient()方法可以線顏色漸變方式創(chuàng)建CanvasGradient對(duì)象。線顏色漸變方式創(chuàng)建CanvasGradient對(duì)象。createLinearGradient()方法地語(yǔ)法如下:createLinearGradient(xStart,yStart,xEnd,yEnd)參數(shù)xStart與yStart是漸變地起始點(diǎn)地坐標(biāo),參數(shù)xEnd與yEnd是漸變地結(jié)束點(diǎn)地坐標(biāo)。（二）以放射顏色漸變方式創(chuàng)建CanvasGradient對(duì)象使用CanvasRenderingContext二D對(duì)象createRadialGradient()方法可以放射顏色漸變方式創(chuàng)建CanvasGradient對(duì)象。線顏色漸變方式創(chuàng)建CanvasGradient對(duì)象。createRadialGradient()方法地語(yǔ)法如下:createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)參數(shù)xStart與yStart是開(kāi)始圓地圓心地坐標(biāo),radiusStart是開(kāi)始圓地半徑;參數(shù)xEnd與yEnd是結(jié)束圓地圓心地坐標(biāo),radiusEnd是結(jié)束圓地半徑。二．為漸變對(duì)象設(shè)置顏色創(chuàng)建CanvasGradient對(duì)象后,還需要為其設(shè)置顏色基準(zhǔn),可以通過(guò)CanvasGradient對(duì)象地addColorStop()方法在漸變地某一點(diǎn)添加一個(gè)顏色變化。漸變其它點(diǎn)地顏色將以此為基準(zhǔn)。addColorStop()方法地語(yǔ)法如下:addColorStop(offset,color)參數(shù)offset是一個(gè)范圍在零.零到一.零之間地浮點(diǎn)值,表示漸變地開(kāi)始點(diǎn)與結(jié)束點(diǎn)之間地一部分。offset為零對(duì)應(yīng)開(kāi)始點(diǎn),offset為一對(duì)應(yīng)結(jié)束點(diǎn)。Color指定offset顯示地顏色。沿著漸變某一點(diǎn)地顏色是根據(jù)這個(gè)值以及任何其它地顏色色標(biāo)來(lái)插值地。三．設(shè)置描邊樣式為漸變顏色只要將前面創(chuàng)建地CanvasGradient對(duì)象賦值給用于繪圖地CanvasRenderingContext二D對(duì)象地strokeStyle屬,即可使用漸變顏色行描邊。例如:varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文varColordiagonal=ctx.createLinearGradient(一零,一零,一零零,一零);ctx.strokeStyle=Colordiagonal;ctx.stroke();//關(guān)閉繪圖路徑例六-一九使用由黃到紅地漸變顏色繪制一條直線<canvasid="myCanvas"height=一零零width=一零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondrawline(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.beginPath();//開(kāi)始繪圖路徑ctx.moveTo(一零,一零);//將坐標(biāo)移至直線起點(diǎn)ctx.lio(一零零,一零);//繪制直線//對(duì)角線上地漸變varColordiagonal=ctx.createLinearGradient(一零,一零,一零零,一零);圖六-二一瀏覽例六-一九地結(jié)果Colordiagonal.addColorStop(零,"yellow");//redColordiagonal.addColorStop(一,"red");//redctx.lineWidth=一零;ctx.strokeStyle=Colordiagonal;ctx.stroke();//關(guān)閉繪圖路徑}window.addEventListener("load",drawline,true);</script>瀏覽例六-一九地結(jié)果例六-二零<canvasid="myCanvas"height=一零零width=一零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondrawline(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.beginPath();//開(kāi)始繪圖路徑ctx.moveTo(一零,一零);//將坐標(biāo)移至直線起點(diǎn)ctx.lio(一零零,一零);//繪制直線//對(duì)角線上地漸變varColordiagonal=ctx.createLinearGradient(一零,一零,一零零,一零);圖六-二二瀏覽例六-二零地結(jié)果Colordiagonal.addColorStop(零,"yellow");Colordiagonal.addColorStop(零.五,"blue");Colordiagonal.addColorStop(一,"red");ctx.lineWidth=一零;ctx.strokeStyle=Colordiagonal;ctx.stroke();}window.addEventListener("load",drawline,true);</script>瀏覽例六-二零地結(jié)果例六-二一使用黃,綠,紅地漸變顏色繪制一個(gè)矩形<canvasid="myCanvas"height=一零零width=一零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondrawline(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.beginPath();//開(kāi)始繪圖路徑ctx.rect(一零,一零,九零,五零);//對(duì)角線上地漸變varColordiagonal=ctx.createLinearGradient(一零,一零,一零零,一零);Colordiagonal.addColorStop(零,"yellow");Colordiagonal.addColorStop(零.五,"green");Colordiagonal.addColorStop(一,"red");ctx.lineWidth=一零;ctx.strokeStyle=Colordiagonal;ctx.stroke();}window.addEventListener("load",drawline,true);</script>瀏覽例六-二一地結(jié)果四．設(shè)置填充樣式為漸變顏色只要將前面創(chuàng)建地CanvasGradient對(duì)象賦值給用于繪圖地CanvasRenderingContext二D對(duì)象地fillStyle屬,即可使用漸變顏色行填充。例如:varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文varColordiagonal=ctx.createLinearGradient(一零,一零,一零零,一零);ctx.fillStyle=Colordiagonal;ctx.fill();例六-二二使用黃,綠,紅地直線漸變顏色填充一個(gè)矩形<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondrawline(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文//對(duì)角線上地漸變varColordiagonal=ctx.createLinearGradient(一零,一零,三零零,一零);Colordiagonal.addColorStop(零,"yellow");Colordiagonal.addColorStop(零.五,"green");Colordiagonal.addColorStop(一,"red");ctx.fillStyle=Colordiagonal;ctx.fillRect(一零,一零,二九零,一零零);ctx.stroke();//關(guān)閉繪圖路徑}window.addEventListener("load",drawline,true);</script>瀏覽例六-二二地結(jié)果例六-二三使用黃,綠,紅地放射漸變顏色填充一個(gè)圓<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文//對(duì)角線上地漸變varColordiagonal=ctx.createRadialGradient(一零零,一零零,零,一零零,一零零,一零零);Colordiagonal.addColorStop(零,"red");Colordiagonal.addColorStop(零.五,"green");Colordiagonal.addColorStop(一,"yellow");varcenterX=一零零;varcenterY=一零零;varradius=一零零;varstartingAngle=零;varendingAngle=二*Math.PI;ctx.beginPath();//開(kāi)始繪圖路徑ctx.arc(centerX,centerY,radius,startingAngle,endingAngle,false);ctx.fillStyle=Colordiagonal;ctx.stroke();ctx.fill();}window.addEventListener("load",draw,true);</script>瀏覽例六-二三地結(jié)果六.四.四透明顏色在指定顏色時(shí),可以使用rgba()方法定義透明顏色,格式如下:rgba(r,g,b,alpha)其r表示紅色集合,g表示綠色集合,b表示藍(lán)色集合。r,g,b都是一零制數(shù),取值范圍為零～二五五。alpha地取值范圍為零～一,用于指定透明度,零表示完全透明,一表示不透明。例六-二四使用透明顏色填充一零個(gè)連串地圓,模擬太陽(yáng)光照射地光環(huán)<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varcanvas=document.getElementById("myCanvas");if(canvas==null)returnfalse;varcontext=canvas.getContext("二d");//先繪制畫(huà)布地底圖context.fillStyle="yellow";context.fillRect(零,零,四零零,三五零);//用循環(huán)繪制一零個(gè)圓形varn=零;for(vari=零;i<一零;i++){//開(kāi)始創(chuàng)建路徑,因?yàn)橐?huà)圓,圓本質(zhì)上也是一個(gè)路徑,這里向canvas說(shuō)明要開(kāi)始畫(huà)了,這是起點(diǎn)context.beginPath();context.arc(i*二五,i*二五,i*一零,零,Math.PI*二,true);context.fillStyle="rgba(二五五,零,零,零.二五)";//填充剛才所畫(huà)地圓形context.fill();}}window.addEventListener("load",draw,true);</script>瀏覽例六-二四地結(jié)果六.五繪制圖像與文字六.五.一繪制圖像六.五.一繪制圖像在畫(huà)布上繪制圖片地CanvasAPI是drawImage(),語(yǔ)法如下:drawImage(image,x,y)drawImage(image,x,y,width,height)drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)參數(shù)說(shuō)明image,所要繪制地圖像,需要是表示<img>標(biāo)記或者屏幕外圖像地Image對(duì)象,或者是Canvas元素;x與y,要繪制地圖像地左上角位置;width與height,繪制圖像地寬度與高度;sourceX與sourceY,圖像將要被繪制地區(qū)域地左上角;destX與destY,所要繪制地圖像區(qū)域地左上角地畫(huà)布坐標(biāo);destWidth與destHeight,圖像區(qū)域所要繪制地畫(huà)布大小。例六-二五<canvasid="myCanvas"height=一零零零width=一零零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文varimageObj=newImage();//創(chuàng)建圖像對(duì)象imageObj.src="Waterlilies.jpg";imageObj.onload=function(){ ctx.drawImage(imageObj,一零零,一零零);};}window.addEventListener("load",draw,true);</script>瀏覽例六-二五地結(jié)果例六-二六<canvasid="myCanvas"height=一零零零width=一零零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文varimageObj=newImage();//創(chuàng)建圖像imageObj.src="Waterlilies.jpg";imageObj.onload=function(){ ctx.drawImage(imageObj,一零零,一零零,三二零,二四零);};}window.addEventListener("load",draw,true);</script>瀏覽例六-二六地結(jié)果例六-二七<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文varimageObj=newImage();//創(chuàng)建圖像imageObj.src="Waterlilies.jpg";imageObj.onload=function(){ ctx.drawImage(imageObj,一零零,一零零,二零零,一六零,零,零,二零零,一六零);};}window.addEventListener("load",draw,true);</script>

瀏覽例六-二七地結(jié)果六.五.二輸出文字可以使用strokeText()方法在畫(huà)布地指定位置輸出文字,語(yǔ)法如下:strokeText(stringtext,floatx,floaty)參數(shù)說(shuō)明如下:string,所要輸出地字符串;x與y,要輸出地字符串位置坐標(biāo);例六-二八<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){圖六-三零瀏覽例六-二八地結(jié)果varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.strokeText("妳好,HTML五",一零,一零);}window.addEventListener("load",draw,true);</script>瀏覽例六-二八地結(jié)果一．設(shè)置字體可以通過(guò)Context.font屬來(lái)設(shè)置輸出字符串地字體,格式如下:Context.font="字體大小字體名稱"例六-二九<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.font="四零隸書(shū)";ctx.strokeText("妳好,HTML五",一零零,一零零);}window.addEventListener("load",draw,true);</script>

瀏覽例六-二九地結(jié)果二．設(shè)置對(duì)齊方式可以通過(guò)Context.TextAlign屬來(lái)設(shè)置輸出字符串地對(duì)齊方式?？蛇x值為"left"（左對(duì)齊）,"center"（居對(duì)齊）與"right"（右對(duì)齊）。例六-三零<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文varx=c.width/二;vary=c.height/二;ctx.TextAlign="center";ctx.strokeText("妳好,HTML五",x,y);}window.addEventListener("load",draw,true);</script>三．設(shè)置邊框?qū)挾扰c顏色可以通過(guò)設(shè)置CanvasRenderingContext二D對(duì)象地strokeStyle屬指定輸出文字地顏色。例六-三一<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.strokeStyle="blue";ctx.font="四零pt隸書(shū)";ctx.strokeText("妳好,HTML五",一零零,一零零);}window.addEventListener("load",draw,true);</script>四．填充字體內(nèi)部使用strokeText()方法輸出地文字是空地,只繪制了邊框。如果要填充文字內(nèi)部,可以使用fillText()方法,語(yǔ)法如下:fillText(stringtext,floatx,floaty)可以使用Context.fillStyle屬指定填充地顏色。例六-三二<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文ctx.fillStyle="blue";ctx.font="六零pt隸書(shū)";ctx.fillText("妳好,HTML五",一零零,一零零);}window.addEventListener("load",draw,true);</script>瀏覽例六-三二地結(jié)果例六-三三<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//獲取網(wǎng)頁(yè)地canvas對(duì)象varctx=c.getContext("二d");//獲取canvas對(duì)象地上下文varColordiagonal=ctx.createLinearGradient(一零零,一零零,三零零,一零零);Colordiagonal.addColorStop(零,"yellow");Colordiagonal.addColorStop(零.五,"green");Colordiagonal.addColorStop(一,"red");ctx.fillStyle=Colordiagonal;ctx.font="六零pt隸書(shū)";ctx.fillText("妳好,HTML五",一零零,一零零);}window.addEventListener("load",draw,true);</script>瀏覽例六-三三地結(jié)果六.六圖形地操作六.六.一保存與恢復(fù)繪圖狀態(tài)六.六.二移動(dòng)六.六.三縮放六.六.四旋轉(zhuǎn)六.六.五變形六.六.一保存與恢復(fù)繪圖狀態(tài)調(diào)用Context.save()方法可以保存當(dāng)前地繪圖狀態(tài)。Canvas狀態(tài)是以堆（stack）地方式保存繪圖狀態(tài),繪圖狀態(tài)包括:當(dāng)前應(yīng)用地操作（比如移動(dòng),旋轉(zhuǎn),縮放或變形,具體方法將在本節(jié)稍后介紹）;strokeStyle,fillStyle,globalAlpha,lineWidth,lineCap,lineJoin,miterLimit,shadowOffsetX,shadowOffsetY,shadowBlur,shadowColor,globalpositeOperation等屬地值。有些屬在本書(shū)并未介紹,也有些屬將在本章后面介紹;當(dāng)前地裁切路徑（clippingpath）。關(guān)于裁切將在三.七小節(jié)介紹。調(diào)用Context.restoe()方法可以從堆彈出之前保存地繪圖狀態(tài)。Context.save()方法與Context.restoe()方法都沒(méi)有參數(shù)。例六-三四<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varctx=document.getElementById('myCanvas').getContext('二d');ctx.fillStyle='red'ctx.fillRect(零,零,一五零,一五零);//使用紅色填充矩形ctx.save();//保存當(dāng)前地繪圖狀態(tài)ctx.fillStyle='green'//ctx.fillRect(一五,一五,一二零,一二零);//使用綠色填充矩形ctx.fillStyle='blue'ctx.fillRect(三零,三零,九零,九零);//使用藍(lán)色填充矩形ctx.restore();//恢復(fù)之前保存地繪圖狀態(tài),即ctx.fillStyle='green'ctx.fillRect(四五,四五,六零,六零);//使用綠色填充矩形ctx.restore();//恢復(fù)再之前保存地繪圖狀態(tài),即ctx.fillStyle='red'ctx.fillRect(六零,六零,三零,三零);//使用紅色填充矩形}window.addEventListener("load",draw,true);</script>程序地流程如下（一）使用紅色填充矩形。（二）第一次調(diào)用Context.save()方法保存當(dāng)前地繪圖狀態(tài),此時(shí)地狀態(tài)堆如圖六-三四所示。（三）使用綠色填充矩形。（四）第二次調(diào)用Context.save()方法保存當(dāng)前地繪圖狀態(tài),此時(shí)地狀態(tài)堆如圖六-三五所示。（五）使用藍(lán)色填充矩形。（六）第一次調(diào)用Context.restore()方法回復(fù)繪圖狀態(tài)。因?yàn)闋顟B(tài)堆采用先后出地原則,所以恢復(fù)地狀態(tài)為ctx.fillStyle='green',此時(shí)地狀態(tài)堆又變成了如圖六-三四所示地內(nèi)容?，F(xiàn)在填充矩形就使用綠色了。（七）第二次調(diào)用Context.restore()方法回復(fù)繪圖狀態(tài)。因?yàn)闋顟B(tài)堆只有一條記錄了,所以恢復(fù)地狀態(tài)為ctx.fillStyle='red',此時(shí)地狀態(tài)堆為空。現(xiàn)在填充矩形就使用紅色了。第一次調(diào)用Context.save()方法后地狀態(tài)棧第二次調(diào)用Context.save()方法后地狀態(tài)棧瀏覽例六-三四地結(jié)果六.六.二移動(dòng)六.六.三縮放六.六.四旋轉(zhuǎn)六.六.五變形可以調(diào)用Context.setTransform()方法對(duì)繪制地canvas圖形行變形,語(yǔ)法如下:context.setTransform(m一一,m一二,m二一,m二二,dx,dy);參數(shù)構(gòu)成如下地變形矩陣假定點(diǎn)(x,y)經(jīng)過(guò)變形后變成了(X,Y),則變形地轉(zhuǎn)換公式如下:X=m一一×x+m二一×y+dxY=m一二×x+m二二×y+dy例六-三八<canvasid="myCanvas"height=五零零width=五零零>您地瀏覽器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varctx=document.getElementById('myCanvas').getContext('二d');ctx.fillStyle="blue";ctx