【文章內(nèi)容簡介】 繪制。（3）路徑創(chuàng)建完成后，為什么要使用圖形上下文對象的closePath()方法關閉路徑？路徑創(chuàng)建完成后，使用繪圖上下文對象的closePath()方法關閉路徑。如果繪制路徑時未使用closePath()方法，則繪制出的是沒有封閉的路徑，除非使用beginPathj()開始新的路徑繪制。（4）Canvas定義顏色值有哪幾種方法？Canvas繪圖時，繪圖上下文的fillStyle屬性與strokeStyle屬性用來指定填充的顏色或邊框的顏色，顏色定義方法與CSS中顏色定義方法基本相同。下面是定義顏色的各種方法。 顏色名：直接使用顏色的英文名稱作為屬性值，例如，blue表示藍色。 rrggbb：用一個6位的十六進制數(shù)表示顏色，例如，0000FF表示藍色。 rgb：是rrggbb的一種簡寫方式，例如，0000FF可以表示為00F，00FFDD表示為0FD。 rgb(rrr,ggg,bbb)：使用十進制數(shù)表示顏色的紅、綠、藍分量，其中，rrr、ggg、bbb都是0～255的十進制整數(shù)。例如，rgb(0,0,0)代表黑色。 rgb(rrr%,ggg%,bbb%)：使用百分比表示顏色的紅、綠、藍分量，例如，rgb(50%,50%,50%)表示rgb(128,128,128)。 rgba(rrr,ggg,bbb,alpha）：使用十進制數(shù)表示顏色的紅、綠、藍分量，alpha表示顏色的透明度，例如rgba(0,128,0,)表示半透明的綠色。2．操作題（1）繪制如圖628所示星空的效果，其中黑色矩形寬800像素、高400像素，在矩形范圍內(nèi)繪制200顆大小、位置、角度隨機的黃色五角星。圖628 星空的效果!DOCTYPE htmlhtmlhead title5star/title script type=text/javascript function draw() { var canvas=(canvas)。 var context=(2d)。 =black。 (0,0,)。 for(var i=0。i200。i++){ var r=()*10+10。 var x=()*。 var y=()*。 var a=()*360。 drawStar(context,x,y,r,r/,a) } } function drawStar(cxt,x,y,r,R,rot) { ()。 for(var i=0。i5。i++){ (((18+i*72rot)/180*)*R+x,((18+i*72rot)/180*)*R+y)。 (((54+i*72rot)/180*)*r+x,((54+i*72rot)/180*)*r+y)。 } =yellow ()。 ()。 } /script/headbody onload=draw()。canvas id=canvas width=800 height=400 你的瀏覽器不支持Canvas/canvas/body/html（2）在頁面中繪制如圖629所示的四種不同漸變色的矩形。圖629 不同漸變色的四個矩形!DOCTYPE htmlhtmlhead titleGradient: Linear/title script type=text/javascript function draw() { var ctx = (39。canvas39。).getContext(39。2d39。)。 // 創(chuàng)建漸變對象 var lingrad = (0,0,150,150)。 (0, 39。00ABEB39。)。 (, 39。f0f39。)。 (1, 39。ff039。)。 var lingrad1 = (310,0,160,150)。 (0, 39。00ABEB39。)。 (, 39。f0f39。)。 (1, 39。ff039。)。 var lingrad2 = (0,310,160,160)。 (0, 39。00ABEB39。)。 (, 39。f0f39。)。 (1, 39。ff039。)。 var lingrad3 = (310,310,160,160)。 (0, 39。00ABEB39。)。 (, 39。f0f39。)。 (1, 39。ff039。)。 // 把漸變對象賦值給填充和輪廓樣式 // 繪制形狀 = lingrad。 (0,0,150,150)。 = lingrad1。 (160,0,150,150)。 = lingrad2。 (0,160,150,150)。 = lingrad3。 (160,160,150,150)。 } /script/headbody onload=draw()。canvas id=canvas width=320 height=320 你的瀏覽器不支持Canvas/canvas/body/html（3）使用transform和arc方法，繪制如圖630所示的彩虹效果。圖630 彩虹效果!DOCTYPE htmlhtmlhead script type=text/javascript function draw(id) { var canvas = (39。canvas39。)。 if (canvas == null) return false。 var context = (39。2d39。)。 /*定義顏色*/ var colors = [FF0000, YELLOW, 0D0, 00F, C0C]。 /*定義線寬*/ = 10。 (1, 0, 0, 1, 100, 0)。 /*循環(huán)繪制橢圓*/ for (var i = 0。 i 。 i++) { /*定義每次向下移動10個像素的變換矩陣*/ (1, 0, 0, 1, 0, 10)。 /*設定顏色*/ = colors[i]。 /*繪制圓弧*/ ()。 (30, 110, 100, 0, , true)。 ()。 } } /script/headbody onload=draw()。canvas id=canvas width=260 height=180 你的瀏覽器不支持Canvas/canvas/body/html第七章1．簡答題（1）在網(wǎng)頁中使用SVG與Canvas進行繪圖，有哪些不同之處？附表列出了canvas繪圖與SVG繪圖的一些不同之處。canvasSVGcanvas通過JavaScript來繪制2D圖形SVG是一種使用XML描述2D圖形的語言canvas是逐像素進行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關注。如果其位置發(fā)生變化，那么整個場景也需要重新繪制，包括已被圖形覆蓋的對象。在SVG中，每個被繪制的圖形均被視為對象。如果SVG對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形。依賴分辨率不依賴分辨率不支持事件處理支持事件處理弱的文本渲染能力最適合帶有大型渲染區(qū)域的應用程序（比如谷歌地圖）能夠以 .png 或 .jpg 格式保存結果圖像復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪不適合游戲應用（2）列舉出3種path元素用于繪制路徑的命令有哪些？分別是什么功能？具體怎么定義？path元素用來定義路徑，使用這個元素可以實現(xiàn)任何其他的圖形，不僅包括基本形狀，也可以實現(xiàn)像貝塞爾曲線那樣的復雜形狀。例如：svg width=200 height=150 path d=M 10 75 L 190 75 stroke=red fill=none/ path d=M 10 75 Q 50 10 100 75 T 190 75 stroke=black strokelinecap=round strokewidth=2 fill=none/具體命令及功能如下。命令含義參數(shù)說明Mmovetox,y將畫筆移動到點(x,y)Llinetox,y畫筆從當前的點繪制線段到點(x,y)Hhorizontal linetox畫筆從當前的點繪制水平線段到點(x,y0)Vvertical linetoy畫筆從當前的點繪制豎直線段到點(x0,y)Aelliptical Arcrx, ry xaxisrotation largearcflag sweepflag x y畫筆從當前的點繪制一段圓弧到點(x,y)Ccurvetox1, y1,x2 y2,x y畫筆從當前的點繪制一段三次貝塞爾曲線到點(x,y)Ssmooth curvetox2 y2,x y特殊版本的三次貝塞爾曲線(省略第一個控制點)Qquadratic Belzier curvex1 y1,x y繪制二次貝塞爾曲線到點(x,y)Tsmooth quadratic Belzierx y特殊版本的二次貝塞爾曲線(省略控制點)Zclosepath無參數(shù)繪制閉合圖形，如果d屬性不指定Z命令，則繪制線段，而不是封閉圖形。（3）strokedasharray屬性在繪制虛線時如何設置，參數(shù)與虛線效果有什么關系？strokedasharray屬性用于繪制虛實線，其格式如下。strokedasharray=value,value,……該屬性由一系列數(shù)字組成，這些數(shù)字必須用逗號隔開。屬性中如果包含空格，不作為分隔符。每個數(shù)字定義了實線段的長度，分別是按照繪制、不繪制這個順序循環(huán)下去。（4）SVG使用linearGradient元素定義漸變色時，id和stop元素的功能分別是什么？其中的offset屬性和stopcolor屬性用于實現(xiàn)什么功能？線性漸變就是一系列顏色沿著一條直線過渡，SVG也使用linearGradient元素定義線性漸變，并可以定義水平、垂直或角形的漸變。漸變的顏色可以由兩種或多種顏色組成，每種顏色通過一個stop標記來定義。使用linearGradient元素定義漸變的語法格式如下。linearGradient元素的屬性中，id屬性為漸變色指定唯一的名稱，以便引用該漸變色。linearGradient id=id1 x1= y1= x2= y2= !用stop元素添加顏色信息 /linearGradient漸變色的成員色使用stop元素定義，語法格式如下。stop offset=offsetValue stopcolor= stopopacity=/stop元素的offset屬性用于定義該成員色的作用范圍，該屬性取值從0%到100%(或者是0到