canvas基礎(chǔ)知識(shí)點(diǎn)簡(jiǎn)介

canvasTOC\o"1-3"\h\u14801基礎(chǔ)概念 218532創(chuàng)建canvas 2286563方法屬性 259704畫(huà)一條直線(xiàn) 3170734.1線(xiàn)條的屬性 3189945畫(huà)矩形 331396畫(huà)五角星 471707圖形變換 530358狀態(tài)保存和恢復(fù) 6154239填充樣式 6214299.1線(xiàn)性漸變 6230709.2徑向漸變 6195739.3使用圖片填充 7248129.4使用畫(huà)布canvas進(jìn)行填充 71139510線(xiàn)條樣式 8319411曲線(xiàn)的繪制 81927711.1arc() 81583411.2arcTo() 91423011.3畫(huà)月亮 103146811.3.1三角函數(shù) 102898511.3.2封裝畫(huà)月亮函數(shù) 11604311.4貝塞爾曲線(xiàn)Bezier 122714411.4.1二次貝塞爾曲線(xiàn) 121579911.4.2三次貝塞爾曲線(xiàn) 132014912文字渲染基礎(chǔ) 132887012.1font屬性 132454712.2textAlign水平對(duì)齊 162183412.3textBaseline垂直對(duì)齊 16942112.4messureText(string).width文本的度量 163258713陰影 161950014global全局 172717914.1globalAlpha 173001414.2globalCompositeOperation 18307715剪輯區(qū)域clip() 18基礎(chǔ)概念1. canvas標(biāo)簽 HTML5<canvas>元素用于圖形的繪制，通過(guò)腳本來(lái)完成<canvas>標(biāo)簽只是圖形容器，您必須使用腳本來(lái)繪制圖形你可以通過(guò)多種方法使用canvas繪制路徑、盒、圓、字符以及添加圖像只有標(biāo)準(zhǔn)瀏覽器支持（IE9以上，谷歌，火狐）canvas不是基于對(duì)象的繪制，而是基于狀態(tài)的繪制創(chuàng)建canvashtml：<canvasid=’canvas’></canvas>JavaScript：varcanvas=document.getElementById(‘vanvas’);canvas.width=500;cnavas.height=500;varcontext=canvas.getContext(‘2d’);方法屬性canvas.width=500; //畫(huà)布的寬度canvas.height=500; //畫(huà)布的高度canvas.getContext(‘2d’); //創(chuàng)建繪圖的上下文環(huán)境context.lineWidth=5; //線(xiàn)條粗細(xì)context.moveTo(100,100); //起始坐標(biāo)context.lineTo(200,200); //劃到給定的坐標(biāo)context.fillStyle=’yellow’ //定義填充顏色context.fill(); //開(kāi)始填充，默認(rèn)填充黑色context.strokeStyle=’red’; //定義線(xiàn)條顏色context.stroke(); //開(kāi)始繪制，默認(rèn)繪制灰色(128,128,128)context.beginPath(); //創(chuàng)建新的狀態(tài)context.closePath(); //畫(huà)一條直線(xiàn)context.moveTo(100,100) 狀態(tài)設(shè)置context.lineTo(100,100);context.stroke(); 繪制線(xiàn)條的屬性lineWidth：線(xiàn)條粗細(xì)lineCap：設(shè)置線(xiàn)條端點(diǎn) butt：平頭端點(diǎn)(默認(rèn)) round：圓頭端點(diǎn) square：方頭端點(diǎn)context.lineCap=”square”; //也可以實(shí)現(xiàn)圖像封閉無(wú)缺口（效果等同closePath()）lineJoin:設(shè)置線(xiàn)條連接樣式 miter：斜接連接（默認(rèn)） round：圓角連接 bevel：斜角連接miterLimit：默認(rèn)值為10 當(dāng)lineJoin為miter時(shí)才有效，如果線(xiàn)條相接所產(chǎn)生的內(nèi)角及外角的距離超過(guò)10，將以bevel的方式相連接畫(huà)矩形context.rect(x,y,width,height); //定義矩形context.fillRect(x,y,width,height); //定義并且繪制圖形(填充，不能描邊)context.strokeRect(x,y,width,height); //定義并且繪制圖形(描邊，不能填充)代碼：context.rect(100,100,300,300);context.lineWidth=10;context.strokeStyle='red';context.fillStyle='green';context.stroke();context.fill();畫(huà)五角星正弦：對(duì)邊除以斜邊余弦：鄰邊除以斜邊正切：對(duì)邊除以鄰邊在編程里面，用的是弧度制：20度表示為：20/180*Math.PI //角度轉(zhuǎn)弧度第一點(diǎn)的坐標(biāo)(x,y)表示為：(Math.cos(18/180*Math.PI)*R,-Math.sin(18/180*Math.Pi)*R)循環(huán)遍歷輸出十個(gè)點(diǎn)：for(vari=0;i<5;i++){ context.lineTo(Math.cos((18+72*i)/180*Math.PI)*300+400,-Math.sin((18+72*i)/180*Math.PI)*300+400); context.lineTo(Math.cos((54+72*i)/180*Math.PI)*150+400,-Math.sin((54+72*i)/180*Math.PI)*150+400);}封裝畫(huà)五角星得到函數(shù)：functiondrawStar(cxt,R,r,x,y){ cxt.beginPath();for(vari=0;i<5;i++){ cxt.lineTo(Math.cos((18+72*i)/180*Math.PI)*R+x,-Math.sin((18+72*i)/180*Math.PI)*R+y); cxt.lineTo(Math.cos((54+72*i)/180*Math.PI)*r+x,-Math.sin((54+72*i)/180*Math.PI)*r+y);} cxt.closePath(); cxt.stroke(); }從軟件工程的角度，變化五角星函數(shù)：(繪制一個(gè)標(biāo)準(zhǔn)的五角星路徑)functionstarPath(cxt){ cxt.beginPath();for(vari=0;i<5;i++){ cxt.lineTo(Math.cos((18+72*i)/180*Math.PI),-Math.sin((18+72*i)/180*Math.PI)); cxt.lineTo(Math.cos((54+72*i)/180*Math.PI)*0.5,-Math.sin((54+72*i)/180*Math.PI)*0.5);} cxt.closePath();}functiondrawStar(cxt,x,y,R,rot){ starPath(cxt);}圖形變換translate(x,y) 位移rotate(deg) 旋轉(zhuǎn) //要把角度制變?yōu)榛《戎?，乘上Math.PI/180scale(sx,sy) 縮放transform(a,b,c,d,e,f) 設(shè)置變換矩陣setTransform(a,b,c,d,e,f) 忽略掉之前所有的變換矩陣，重新設(shè)置新的變換矩陣 a：水平縮放（1） b：水平傾斜（0） c：垂直傾斜（0） d：垂直縮放（1） e：水平位移（0） f：垂直位移（0）狀態(tài)保存和恢復(fù)save() //保存當(dāng)前圖形的狀態(tài)restore() //恢復(fù)所保存的圖形的狀態(tài)填充樣式fillStyle線(xiàn)性漸變1. vargrd=context.createLinearGradient(xstart,ystart,xend,yend);2. grd.addColorStop(stop,color);3. context.fillStyle=grd;填充白色到黑色的線(xiàn)性漸變：varlinearGrad=context.createLinearGradient(0,0,800,800);linearGrad.addColorStop(0.0,’white’);linearGrad.addColorStop(1.0,’black’);context.fillStyle=linearGrad;context.fillRect(0,0,800,800);徑向漸變1. vargrd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);2. grd.addColorStop(stop,color);3. context.fillStyle=grd;填充白色到黑色的線(xiàn)性漸變：vargrd=context.createRadialGradient(400,400,0,400,400,canvas.height/2);grd.addColorStop(0,'white');grd.addColorStop(1,'black');context.fillStyle=grd;context.fillRect(0,0,800,800);使用圖片填充createPattern(img,repeat-style)repeat-style:no-repeat repeat-x repeat-y repeat圖片填充實(shí)例：varbgImg=newImage();bgImg.src=”pic.jpg”;bgImg.onload=function(){ varpattern=context.createPattern(bgImg,”repeat”); context.fillStyle=pattern; context.fillRect(0,0,800,800);}使用畫(huà)布canvas進(jìn)行填充createPattern(canvas,repeat-style)畫(huà)布填充實(shí)例：functioncreateBgCanvas(){varbgCanvas=document.createElement('canvas');bgCanvas.width=100;bgCanvas.height=100;varbgContext=bgCanvas.getContext('2d');vargrd=bgContext.createRadialGradient(50,50,0,50,50,bgCanvas.height/2);grd.addColorStop(0,'white');grd.addColorStop(1,'black');bgContext.fillStyle=grd;bgContext.fillRect(0,0,100,100);returnbgCanvas;}varbgCanvas=createBgCanvas();varpattern=context.createPattern(bgCanvas,'repeat');context.fillStyle=pattern;context.fillRect(0,0,800,800);線(xiàn)條樣式strokeStyle填充的樣式，同樣使用于線(xiàn)條樣式曲線(xiàn)的繪制arc()context.arc( centerX,centerY,radius, //圓心的坐標(biāo)centerX，centerY,圓弧半徑radius staringAngle,endingAngle, //開(kāi)始角度staringAngle，結(jié)束角度endingAngle anticlockwise=false //可選，是否逆時(shí)針繪制，false表示順時(shí)針繪制)繪制一個(gè)圓：context.arc(100,100,100,0*Math.PI,2*Math.PI);context.stroke();繪制一個(gè)半圓：context.arc(100,100,100,0*Math.PI,1*Math.PI);context.stroke();封裝圓角矩形函數(shù)：functiondrawRoundRect(cxt,x,y,width,height,radius){cxt.save();cxt.translate(x,y);pathRoundRect(cxt,width,height,radius);cxt.stroke();cxt.restore();}functionpathRoundRect(cxt,width,height,radius){cxt.beginPath();cxt.arc(radius+width,radius+height,radius,0*Math.PI,0.5*Math.PI);cxt.lineTo(radius,height+2*radius);cxt.arc(radius,radius+height,radius,0.5*Math.PI,1*Math.PI);cxt.lineTo(0,radius);cxt.arc(radius,radius,radius,1*Math.PI,1.5*Math.PI);cxt.lineTo(radius+width,0);cxt.arc(radius+width,radius,radius,1.5*Math.PI,2*Math.PI);cxt.closePath();}drawRoundRect(context,50,50,100,200,50); arcTo()context.arcTo(x1,y1,x2,y2,radius);x0,y0,x1,y1,x2,y2只是形成兩條線(xiàn)段，圓弧的切點(diǎn)不一定要在這兩條線(xiàn)段上上圖的代碼：//紅線(xiàn)context.beginPath();context.moveTo(100,100);context.arcTo(400,100,400,400,100);context.strokeStyle='red';context.lineWidth=5;context.stroke();//輔助線(xiàn)context.beginPath();context.moveTo(100,100);context.lineTo(400,100);context.lineTo(400,400);context.strokeStyle='black';context.lineWidth=1;context.stroke();畫(huà)月亮三角函數(shù)反三角函數(shù)：反正弦arcsinx，反余弦arccosx，反正切arctanx，反余切arccotx，反正割arcsecx,反余割arccscx反三角函數(shù)算出來(lái)的是弧度。三角函數(shù)表示直角邊的比值。角度轉(zhuǎn)弧度：Math.PI/180*角度弧度轉(zhuǎn)角度：180/Math.PI*弧度在直角三角形中，30度角對(duì)應(yīng)的邊是斜邊的一半：sin30°=1/2；在js里，返回30度角Math.asin(1/2)*(180/Math.PI);封裝畫(huà)月亮函數(shù)arc()+arc()functiondrawMoon(cxt,x,y,R,r,rot){cxt.translate(x,y);cxt.rotate(rot*Math.PI/180);vari=(R*R-r*r)/(2*r);cxt.arc(0,0,R,0.5*Math.PI,1.5*Math.PI,true);cxt.stroke();cxt.beginPath();cxt.arc(0-i,0,i+r,Math.atan(R/i),-Math.atan(R/i),true);cxt.stroke();}drawMoon(context,200,300,100,50,30);arc()+arcTo()drawMoon(上下文環(huán)境，圓心坐標(biāo)x，圓心坐標(biāo)y，圓弧半徑，自定義點(diǎn)的坐標(biāo)x，旋轉(zhuǎn)角度)functiondrawMoon(cxt,x,y,R,dot,rot){cxt.save();varr=Math.sqrt(R*R+dot*dot)*R/dot;cxt.translate(x,y);cxt.rotate(rot*Math.PI/180);cxt.arc(0,0,R,0.5*Math.PI,1.5*Math.PI,true);cxt.moveTo(0,0-R);cxt.arcTo(dot,0,0,R,r);cxt.restore();}drawMoon(context,200,300,100,200,30);context.stroke();context.fill();貝塞爾曲線(xiàn)Bezier二次貝塞爾曲線(xiàn)quadraticCurveTo()context.moveTo(x0,y0); //起始點(diǎn)坐標(biāo)context.quadraticCurveTo(x1,y1,x2,y2); //控制點(diǎn)坐標(biāo)、結(jié)束點(diǎn)坐標(biāo)三次貝塞爾曲線(xiàn)bezierCurveTo()context.moveTo(x0,y0); //起始點(diǎn)坐標(biāo)context.bezierCurveTo(x1,y1,x2,y2,x3,y3); //控制點(diǎn)坐標(biāo)、控制點(diǎn)坐標(biāo)、結(jié)束點(diǎn)坐標(biāo)文字渲染基礎(chǔ)context.font=’bold40pxArial’; //設(shè)置字體樣式context.fillText(string,x,y,[maxlen]); //給string填充顏色，maxlen（可選）：設(shè)置最長(zhǎng)值context.strokeText(string,x,y,[maxlen]); //給string描邊f(xié)ont屬性默認(rèn)值：”20pxsans-serif”context.font=”font-stylefont-variantfont-weightfont-sizefont-family”font-style:normal (default)italic (斜體字)oblique (傾斜字體)font-variant:nomal (default)small-caps (小型大寫(xiě)字母)font-weight:lighternormal (default)boldbolder 100,200,300,400(nromal),500,600,700(bold),800,900font-size:20px (default)2em150%xx-small、x-small、medium、large、x-large、xx-largefont-family:web安全字體serif(襯線(xiàn)字體)sans-serif(無(wú)襯線(xiàn)字體)monospace(等寬字體)textAlign水平對(duì)齊context.textAlign=left/center/right //相對(duì)于經(jīng)過(guò)x坐標(biāo)的y軸的平行線(xiàn)textBaseline垂直對(duì)齊context.textBaseline=top/middle/bottom //相對(duì)于經(jīng)過(guò)y坐標(biāo)的x軸的平行線(xiàn)messureText(string).width文本的度量context.measureText(string).widthmeasureText()函數(shù)傳入一個(gè)字符串，然后返回一個(gè)對(duì)象，這個(gè)對(duì)象擁有一個(gè)width屬性，這個(gè)width屬性存有傳入的字符串在canvas上渲染的時(shí)候渲染出的字符串的寬度陰影context.shadowColor //陰影顏色context.shadowOffsetX //陰影在x軸上的位移context.shadowOffsetY //陰影在y軸上的位移context.shadowBlur //陰影的模糊程度給矩形加上陰影：context.fillStyle='green';context.shadowColor='gray';context.shadowOffsetX=20;context.shadowOffsetY=20;context.shadowBlur=50;context.fillRect(100,100,300,200);給文字加上陰影：varstr='canvas';context.font='bold80px微軟雅黑';context.shadowColor='gray';context.shadowOffsetX=5;context.shadowOffsetY=5;context.shadowBlur=5;context.fillStyle='blue';context.fillText(str,50,300);global全局globalAlpha告訴整個(gè)繪制系統(tǒng)，我們即將繪制的所有的圖形，都將使用指定的alpha值來(lái)設(shè)置透明度。context.globalAlpha=1; (Default)globalAlpha小案例：context.globalAlpha=0.7;for(vari=0;i<100;i++){varR=Math.floor(Math.random()*255);varG