canvas基礎(chǔ)知識點簡介

canvasTOC\o"1-3"\h\u14801基礎(chǔ)概念 218532創(chuàng)建canvas 2286563方法屬性 259704畫一條直線 3170734.1線條的屬性 3189945畫矩形 331396畫五角星 471707圖形變換 530358狀態(tài)保存和恢復 6154239填充樣式 6214299.1線性漸變 6230709.2徑向漸變 6195739.3使用圖片填充 7248129.4使用畫布canvas進行填充 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水平對齊 162183412.3textBaseline垂直對齊 16942112.4messureText(string).width文本的度量 163258713陰影 161950014global全局 172717914.1globalAlpha 173001414.2globalCompositeOperation 18307715剪輯區(qū)域clip() 18基礎(chǔ)概念1. canvas標簽 HTML5<canvas>元素用于圖形的繪制，通過腳本來完成<canvas>標簽只是圖形容器，您必須使用腳本來繪制圖形你可以通過多種方法使用canvas繪制路徑、盒、圓、字符以及添加圖像只有標準瀏覽器支持（IE9以上，谷歌，火狐）canvas不是基于對象的繪制，而是基于狀態(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; //線條粗細context.moveTo(100,100); //起始坐標context.lineTo(200,200); //劃到給定的坐標context.fillStyle=’yellow’ //定義填充顏色context.fill(); //開始填充，默認填充黑色context.strokeStyle=’red’; //定義線條顏色context.stroke(); //開始繪制，默認繪制灰色(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：線條粗細lineCap：設(shè)置線條端點 butt：平頭端點(默認) round：圓頭端點 square：方頭端點context.lineCap=”square”; //也可以實現(xiàn)圖像封閉無缺口（效果等同closePath()）lineJoin:設(shè)置線條連接樣式 miter：斜接連接（默認） round：圓角連接 bevel：斜角連接miterLimit：默認值為10 當lineJoin為miter時才有效，如果線條相接所產(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();畫五角星正弦：對邊除以斜邊余弦：鄰邊除以斜邊正切：對邊除以鄰邊在編程里面，用的是弧度制：20度表示為：20/180*Math.PI //角度轉(zhuǎn)弧度第一點的坐標(x,y)表示為：(Math.cos(18/180*Math.PI)*R,-Math.sin(18/180*Math.Pi)*R)循環(huá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ù)：(繪制一個標準的五角星路徑)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)榛《戎疲松螹ath.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)保存和恢復save() //保存當前圖形的狀態(tài)restore() //恢復所保存的圖形的狀態(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圖片填充實例：varbgImg=newImage();bgImg.src=”pic.jpg”;bgImg.onload=function(){ varpattern=context.createPattern(bgImg,”repeat”); context.fillStyle=pattern; context.fillRect(0,0,800,800);}使用畫布canvas進行填充createPattern(canvas,repeat-style)畫布填充實例：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, //圓心的坐標centerX，centerY,圓弧半徑radius staringAngle,endingAngle, //開始角度staringAngle，結(jié)束角度endingAngle anticlockwise=false //可選，是否逆時針繪制，false表示順時針繪制)繪制一個圓：context.arc(100,100,100,0*Math.PI,2*Math.PI);context.stroke();繪制一個半圓：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只是形成兩條線段，圓弧的切點不一定要在這兩條線段上上圖的代碼：//紅線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度角對應的邊是斜邊的一半：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)境，圓心坐標x，圓心坐標y，圓弧半徑，自定義點的坐標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); //起始點坐標context.quadraticCurveTo(x1,y1,x2,y2); //控制點坐標、結(jié)束點坐標三次貝塞爾曲線bezierCurveTo()context.moveTo(x0,y0); //起始點坐標context.bezierCurveTo(x1,y1,x2,y2,x3,y3); //控制點坐標、控制點坐標、結(jié)束點坐標文字渲染基礎(chǔ)context.font=’bold40pxArial’; //設(shè)置字體樣式context.fillText(string,x,y,[maxlen]); //給string填充顏色，maxlen（可選）：設(shè)置最長值context.strokeText(string,x,y,[maxlen]); //給string描邊f(xié)ont屬性默認值：”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水平對齊context.textAlign=left/center/right //相對于經(jīng)過x坐標的y軸的平行線textBaseline垂直對齊context.textBaseline=top/middle/bottom //相對于經(jīng)過y坐標的x軸的平行線messureText(string).width文本的度量context.measureText(string).widthmeasureText()函數(shù)傳入一個字符串，然后返回一個對象，這個對象擁有一個width屬性，這個width屬性存有傳入的字符串在canvas上渲染的時候渲染出的字符串的寬度陰影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告訴整個繪制系統(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