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

1、canvasi基礎(chǔ)概念i2創(chuàng)建 canvas 23方法屬性24畫一條直線24.1 線條的屬性35畫矩形36畫五角星47圖形變換58狀態(tài)保存和恢復(fù)59填充樣式59.1 線性漸變69.2 徑向漸變69.3 使用圖片填充69.4 使用畫布canvas 進(jìn)行填充 710線條樣式711曲線的繪制711.1 arc() 711.2 arcTo()811.3 畫月亮1011.3.1 三角函數(shù) 1011.3.2 封裝畫月亮函數(shù) 1011.4 貝塞爾曲線 Bezier 1211.4.1 二次貝塞爾曲線 1211.4.2 三次貝塞爾曲線 1212文字渲染基礎(chǔ)1312.1 font 屬性1312.2 textAli

2、gn水平對(duì)齊1512.3 textBaseline垂直對(duì)齊1512.4 messureText(string).width文本的度量1513陰影1614global全局 1614.1 globalAlpha 1614.2 globalCompositeOperation 1715剪輯區(qū)域clip() 171基礎(chǔ)概念1 . canvas 標(biāo)簽HTML5<canvas>元素用于圖形的繪制，通過腳本來(lái)完成<canvas>標(biāo)簽只是圖形容器，您必須使用腳本來(lái)繪制圖形你可以通過多種方法使用canvas繪制路徑、盒、圓、字符以及添加圖像只有標(biāo)準(zhǔn)瀏覽器支持(IE9以上，谷歌，火狐)ca

3、nvas不是基于對(duì)象的繪制，而是基于狀態(tài)的繪制2 倉(cāng)惟 canvashtml :<canvas id= ' canvas ' ></canvas>JavaScript ：var canvas=document.getElementById(' vanvas ');canvas.width=500;cnavas.height=500;var context=canvas.getContext('2d');3方法屬性canvas.width =500;canvas.height =500;canvas.getContext(

4、' 2d')/畫布的寬度/畫布的高度/創(chuàng)建繪圖的上下文環(huán)境線條粗細(xì)起始坐標(biāo)/劃到給定的坐標(biāo)/定義填充顏色/開始填充，默認(rèn)填充黑色/定義線條顏色/開始繪制，默認(rèn)繪制灰色 (128,128,128)/創(chuàng)建新的狀態(tài)/繪制context.lineWidth =5;/context . moveTo(100,100);/context.lineTo (200,200); context . fillStyle =' yellow context.fill(); context.strokeStyle =' red context.stroke(); context.beg

5、inPath(); context.closePath();4畫一條直線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)圖像封閉無(wú)缺口（效果等同closePath（） ） lineJoin :設(shè)置線條連接樣式miter :斜接連接（默認(rèn)）round :圓角連接bevel :斜角連接mi

6、terLimit :默認(rèn)值為 10方式相連接當(dāng)lineJoin 為miter時(shí)才有效，如果線條相接所產(chǎn)生的內(nèi)角與外角的距離超過10 ,將以bevelmiterLimit5畫矩形/定義矩形/定義并且繪制圖形（填充，不能描邊）/定義并且繪制圖形（描邊，不能填充）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.stroke

7、Style='red'context.fillStyle='green'context.stroke();context.fill();(426cieg)(l3Bdeg)6畫五角星x: cos(90deg) * Ry:x: co5(S4deX)* r¥： sin(54d命'L f 18 deg- - /cos(lSdeg) * Rv: -sin(18deg) * R正弦：對(duì)邊除以斜邊余弦：鄰邊除以斜邊 正切：對(duì)邊除以鄰邊在編程里面，用的是 弧度制： 20度表示為：20/180*Math.PI/ 角度轉(zhuǎn)弧度第一點(diǎn)的坐標(biāo)(x , y )表示為：(M

8、ath.cos(18/180*Math.PI)*R，-Math.sin(18/180*Math.Pi)*R )循環(huán)遍歷輸出十個(gè)點(diǎn)：for( var i=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ù)：function

9、 drawStar(cxt,R,r,x,y)cxt.beginPath();for( var i=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)的五角星路徑)function st

10、arPath(cxt)cxt.beginPath();for( var i=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();)function drawStar(cxt,x,y,R,rot)starPath(cxt);)7圖形變換位移旋轉(zhuǎn)/要把角度制變?yōu)榛《戎?，乘?Ma

11、th.PI/180縮放設(shè)置變換矩陣忽略掉之前所有的變換矩陣，重新設(shè)置新的變換矩陣translate(x,y) rotate(deg) scale(sx,sy) transform(a,b,c,d,e,f) setTransform(a,b,c,d,e,f)a：水平縮放(1) b：水平傾斜(0)c：垂直傾斜(0) d:垂直縮放(1)e：水平位移(0) f :垂直位移(0)8狀態(tài)保存和恢復(fù)save()/保存當(dāng)前圖形的狀態(tài)restore()/恢復(fù)所保存的圖形的狀態(tài)9填充樣式fillStyle9.1 線性漸變1. var grd=context.createLinearGradient(xstart,

12、ystart,xend,yend);2. grd. addColorStop(stop,color);3. context.fillStyle=grd;填充白色到黑色的線性漸變：var linearGrad=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);9

13、.2 徑向漸變1. var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);2. grd. addColorStop(stop,color);3. context.fillStyle=grd;填充白色到黑色的線性漸變：var grd=context.createRadialGradient(400,400,0,400,400,canvas.height/2);grd.addColorStop(0,'white');grd.addColorStop(1,'black');context.fillStyle=g

14、rd;context.fillRect(0,0,800,800);9.3 使用圖片填充createPattern(img,repeat-style)repeat-style:no-repeatrepeat-xrepeat-y repeat圖片填充實(shí)例：var bgImg=new Image();bgImg.src= pic.jpg ；bgImg.onload=function()var pattern=context. createPattern (bgImg, “ repeat ");context.fillStyle=pattern;context.fillRect(0,0,80

15、0,800);9.4 使用畫布canvas進(jìn)行填充createPattern(canvas,repeat-style)畫布填充實(shí)例：function createBgCanvas()var bgCanvas=document.createElement('canvas');bgCanvas.width=100;bgCanvas.height=100;var bgContext=bgCanvas.getContext('2d');var grd=bgContext.createRadialGradient(50,50,0,50,50,bgCanvas.height

16、/2);grd.addColorStop(0,'white');grd.addColorStop(1,'black');bgContext.fillStyle=grd;bgContext.fillRect(0,0,100,100);return bgCanvas;var bgCanvas=createBgCanvas();var pattern=context.createPattern(bgCanvas, 'repeat');context.fillStyle=pattern;context.fillRect(0,0,800,800);10線條

17、樣式strokeStyle填充的樣式，同樣使用于線條樣式11曲線的繪制11.1arc()context.arc (centerX,centerY,radius, staringAngle,endingAngle, anticlockwise=false/圓心的坐標(biāo)centerX , centerY, 圓弧半徑radius / 開始角度 staringAngle ,結(jié)束角度 endingAngle /可選，是否逆時(shí)針繪制 ，false 表示順時(shí)針繪制1.5 pi繪制一個(gè)圓：context.arc(100,100,100,0*Math.PI,2*Math.PI);context.stroke();

18、繪制一個(gè)半圓：context.arc(100,100,100,0*Math.PI,1*Math.PI);context.stroke();封裝圓角矩形函數(shù)：function drawRoundRect(cxt,x,y,width,height,radius)cxt.save();cxt.translate(x,y);pathRoundRect(cxt,width,height,radius);cxt.stroke();cxt.restore();function pathRoundRect(cxt,width,height,radius)cxt.beginPath();cxt.arc(radi

19、us+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

20、.PI);cxt.closePath();drawRoundRect(context,50,50,100,200,50);11.2 arcTo()context.arcTo(x1,y1,x2,y2,radius);x0,y0,x1,y1,x2,y2只是形成兩條線段，圓弧的切點(diǎn)不一定要在這兩條線段上Mm1x2.,d上圖的代碼：/紅線context.beginPath();context.moveTo(100,100);context.arcTo(400,100,400,400,100);context.strokeStyle='red'context.lineWidth=5;co

21、ntext.stroke();/輔助線context.beginPath();context.moveTo(100,100);context.lineTo(400,100);context.lineTo(400,400);context.strokeStyle='black'context.lineWidth=1;context.stroke();11.3畫月亮11.3.1 三角函數(shù)基本函數(shù)英文縮寫表達(dá)式語(yǔ)言描述正蘢曲數(shù)sirtesin占比K的對(duì)邊比斜邊余弦函數(shù)cosinecosb/cd的鄰邊比斜邊斜物/正切函數(shù)langemtana/b4的對(duì)邊比鄰邊/的對(duì)動(dòng)口余切函數(shù)cotan

22、gentcotb第上4的鄰邊比對(duì)邊，才的懦邊8L正割函數(shù)secamsec的上4的斜邊比鄰邊余割函數(shù)cosecamCSCc/a丁白的斜邊比對(duì)邊反三角函數(shù)：反正弦 arcsin x , 反余弦 arccos x , 反正切 arctan x , 反余切 arccot x , 反正害U arcsec x,反余害U arccsc x反三角函數(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)*

23、(180/Math.PI);11.3.2封裝畫月亮函數(shù)arc()+arc()function drawMoon(cxt,x,y,R,r,rot)cxt.translate(x,y);cxt.rotate(rot*Math.PI/180);var i=(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,

24、200,300,100,50,30);arc()+arcTo()(400JOO)(4Q0f400)(1200,400)(400,700)drawMoon(上下文環(huán)境，圓心坐標(biāo) x,圓心坐標(biāo)y,圓弧半徑，自定義點(diǎn)的坐標(biāo) x ,旋轉(zhuǎn)角度) function drawMoon(cxt,x,y,R,dot,rot)cxt.save();var r=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.moveT

25、o(0,0-R);cxt.arcTo(dot,0,0,R,r);cxt.restore();drawMoon(context,200,300,100,200,30);context.stroke();context.fill();11.4貝塞爾曲線Bezier11.4.1 二次貝塞爾曲線/起始點(diǎn)坐標(biāo)/控制點(diǎn)坐標(biāo)、結(jié)束點(diǎn)坐標(biāo)quadraticCurveTo()context.quadraticCurveTo(x1,y1,x2,y2);context.moveTo(x0,y0);11.4.2 三次貝塞爾曲線bezierCurveTo()/控制點(diǎn)坐標(biāo)、控制點(diǎn)坐標(biāo)、結(jié)束點(diǎn)坐標(biāo)context.moveT

26、o(x0,y0);/ 起始點(diǎn)坐標(biāo)context.bezierCurveTo(x1,y1,x2,y2,x3,y3);12文字渲染基礎(chǔ)/設(shè)置字體樣式/給string填充顏色，maxlen （可選）：設(shè)置最長(zhǎng)值/給string 描邊context.font= ' bold 40px Arial context.fillText(string,x,y,maxlen); context.strokeText(string,x,y,maxlen);12.1 font 屬性默認(rèn)值："20px sans - serif ”context.font= " font -style fo

27、nt-variant font-weight font-size font-family1. font-style:normal (default) italic(斜體字)oblique(傾斜字體)2. font-variant:nomal(default)small-caps (小型大寫字母)3. font-weight:lighter normal (default) bold bolder100,200,300,400(nromal),500,600,700(bold),800,9004. font-size:20px(default)2em 150% xx-small 、x-small

28、 、medium、large 、x-large 、xx-large5. font-family: web安全字體 a) serif(襯線字體)Georgia, sent,Palatine Linotype'',"Book AntiquaPaiatino. serif"Times New Roman ', Times; serifThis is a headingThis is a paragraphThis is a headingTItis is a par哼窗曲This is a headingTim a paragraphb） sans-ser

29、if（ 無(wú)襯線字體）字體文本示例Anal. Helvetica, sans-serifArial 日解。h. Gadget, sans-serifCorrie Sans I.1S' cursive, sans-senfImpact CfiarcoaL sans-serifLucida Sans Unicode 'Lucida Grande sans-serifTahoma Geneva, sans-serifTrebuchet LIS Helvetica, sans-serifVerdana, Sene/a, sans-serjfThis is a headingThis is

30、 a paragraphThis is a headingThis is a paragraphThis is a headingThis 冶 a porcrophThis is a headingThisisaDaragraDliThis is a headingThis is a paragraphThis is a headingThis is a paragraphThis is a headingThis is a paragraphThis is a headingThis is a pdmg3Dhc） monospace（等寬字體）Couner New Courier, mono

31、spaceThis is a headingThis lb a paragraph' Lucida Console". Monaco, monospaceThis is a headingTh-is is a paragraph12.2 textAlign水平對(duì)齊context.textAlign=left/center/right/相對(duì)于經(jīng)過x坐標(biāo)的y軸的平行線text A1igntextAligncciilcrlefttextAlign - right12.3 textBaseline垂直對(duì)齊context.textBaseline=top/middle/bottom/相

32、對(duì)于經(jīng)過y坐標(biāo)的x軸的平行線歡迎大家學(xué)習(xí)(Canvas)繪圖接口詳解!歡迎大家學(xué)習(xí)Cunvus繪圖接口詳解+ 歡迎大家學(xué)習(xí)Canvas繪圖接口詳解!12.4 messureText(string).width文本的度量context.measureText(string).widthmeasureText() 函數(shù)傳入一個(gè)字符串，然后返回一個(gè)對(duì)象，這個(gè)對(duì)象擁有一個(gè) width屬性，這個(gè)width屬性存有傳入 的字符串在canvas上渲染的時(shí)候渲染出的字符串的寬度13陰影context.shadowColor context.shadowOffsetX context.shadowOffsetY

33、 context.shadowBlur/陰影顏色/陰影在x軸上的位移/陰影在y軸上的位移/陰影的模糊程度給矩形加上陰影：context.fillStyle='green'context.shadowColor='gray'context.shadowOffsetX=20;context.shadowOffsetY=20;context.shadowBlur=50;context.fillRect(100,100,300,200);給文字加上陰影：var str='canvas'context.font='bold 80Px微軟雅黑cont

34、ext.shadowColor='gray'context.shadowOffsetX=5;context.shadowOffsetY=5;context.shadowBlur=5;context.fillStyle='blue'context.fillText(str,50,300);14 global 全局14.1 globalAlpha告訴整個(gè)繪制系統(tǒng)，我們即將繪制的所有的圖形，都將使用指定的alpha值來(lái)設(shè)置透明度。context.globalAlpha=1;(Default)globalAlpha小案例：context.globalAlpha=0.7;for(var i=0; i<100; i+)v