canvas基礎(chǔ)知識(shí)點(diǎn)簡(jiǎn)介_第1頁
canvas基礎(chǔ)知識(shí)點(diǎn)簡(jiǎn)介_第2頁
canvas基礎(chǔ)知識(shí)點(diǎn)簡(jiǎn)介_第3頁
canvas基礎(chǔ)知識(shí)點(diǎn)簡(jiǎn)介_第4頁
canvas基礎(chǔ)知識(shí)點(diǎn)簡(jiǎn)介_第5頁
已閱讀5頁,還剩13頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

canvasTOC\o"1-3"\h\u14801基礎(chǔ)概念 218532創(chuàng)建canvas 2286563方法屬性 259704畫一條直線 3170734.1線條的屬性 3189945畫矩形 331396畫五角星 471707圖形變換 530358狀態(tài)保存和恢復(fù) 6154239填充樣式 6214299.1線性漸變 6230709.2徑向漸變 6195739.3使用圖片填充 7248129.4使用畫布canvas進(jìn)行填充 71139510線條樣式 8319411曲線的繪制 81927711.1arc() 81583411.2arcTo() 91423011.3畫月亮 103146811.3.1三角函數(shù) 102898511.3.2封裝畫月亮函數(shù) 11604311.4貝塞爾曲線Bezier 122714411.4.1二次貝塞爾曲線 121579911.4.2三次貝塞爾曲線 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>元素用于圖形的繪制,通過腳本來完成<canvas>標(biāo)簽只是圖形容器,您必須使用腳本來繪制圖形你可以通過多種方法使用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; //畫布的寬度canvas.height=500; //畫布的高度canvas.getContext(‘2d’); //創(chuàng)建繪圖的上下文環(huán)境context.lineWidth=5; //線條粗細(xì)context.moveTo(100,100); //起始坐標(biāo)context.lineTo(200,200); //劃到給定的坐標(biāo)context.fillStyle=’yellow’ //定義填充顏色context.fill(); //開始填充,默認(rèn)填充黑色context.strokeStyle=’red’; //定義線條顏色context.stroke(); //開始繪制,默認(rèn)繪制灰色(128,128,128)context.beginPath(); //創(chuàng)建新的狀態(tài)context.closePath(); //畫一條直線context.moveTo(100,100) 狀態(tài)設(shè)置context.lineTo(100,100);context.stroke(); 繪制線條的屬性lineWidth:線條粗細(xì)lineCap:設(shè)置線條端點(diǎn) butt:平頭端點(diǎn)(默認(rèn)) round:圓頭端點(diǎn) square:方頭端點(diǎn)context.lineCap=”square”; //也可以實(shí)現(xiàn)圖像封閉無缺口(效果等同closePath())lineJoin:設(shè)置線條連接樣式 miter:斜接連接(默認(rèn)) round:圓角連接 bevel:斜角連接miterLimit:默認(rèn)值為10 當(dāng)lineJoin為miter時(shí)才有效,如果線條相接所產(chǎn)生的內(nèi)角及外角的距離超過10,將以bevel的方式相連接畫矩形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();畫五角星正弦:對(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);}封裝畫五角星得到函數(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線性漸變1. vargrd=context.createLinearGradient(xstart,ystart,xend,yend);2. grd.addColorStop(stop,color);3. context.fillStyle=grd;填充白色到黑色的線性漸變: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;填充白色到黑色的線性漸變: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);}使用畫布canvas進(jìn)行填充createPattern(canvas,repeat-style)畫布填充實(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);線條樣式strokeStyle填充的樣式,同樣使用于線條樣式曲線的繪制arc()context.arc( centerX,centerY,radius, //圓心的坐標(biāo)centerX,centerY,圓弧半徑radius staringAngle,endingAngle, //開始角度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只是形成兩條線段,圓弧的切點(diǎn)不一定要在這兩條線段上上圖的代碼://紅線context.beginPath();context.moveTo(100,100);context.arcTo(400,100,400,400,100);context.strokeStyle='red';context.lineWidth=5;context.stroke();//輔助線context.beginPath();context.moveTo(100,100);context.lineTo(400,100);context.lineTo(400,400);context.strokeStyle='black';context.lineWidth=1;context.stroke();畫月亮三角函數(shù)反三角函數(shù):反正弦arcsinx,反余弦arccosx,反正切arctanx,反余切arccotx,反正割arcsecx,反余割arccscx反三角函數(shù)算出來的是弧度。三角函數(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);封裝畫月亮函數(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();貝塞爾曲線Bezier二次貝塞爾曲線quadraticCurveTo()context.moveTo(x0,y0); //起始點(diǎn)坐標(biāo)context.quadraticCurveTo(x1,y1,x2,y2); //控制點(diǎn)坐標(biāo)、結(jié)束點(diǎn)坐標(biāo)三次貝塞爾曲線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 (小型大寫字母)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(襯線字體)sans-serif(無襯線字體)monospace(等寬字體)textAlign水平對(duì)齊context.textAlign=left/center/right //相對(duì)于經(jīng)過x坐標(biāo)的y軸的平行線textBaseline垂直對(duì)齊context.textBaseline=top/middle/bottom //相對(duì)于經(jīng)過y坐標(biāo)的x軸的平行線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值來設(shè)置透明度。context.globalAlpha=1; (Default)globalAlpha小案例:context.globalAlpha=0.7;for(vari=0;i<100;i++){varR=Math.floor(Math.random()*255);varG

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論