通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5中的canvas標簽及應(yīng)用實例第2部分-資料下載頁
2024-11-14 07:40本頁面
【導(dǎo)讀】1)centerX和centerY參數(shù)代表圓和圓弧的中心（圓心）的坐標；2)radius就是數(shù)學(xué)上的半徑：從圓心到圓周線的一條直線；4)anticlockwise參數(shù)是一個布爾值，代表繪圖方向，默認為false（順時。當(dāng)其值為true時，弧形按逆時針方向來繪制，當(dāng)其值為false時，弧。2*PI弧度，如下所示的代碼：(centerX,centerY,radius,0,2*,平面直角坐標系中x，y的二次方程所表示的圖形的統(tǒng)稱。常見的二次曲線有圓、橢圓、雙曲線和拋物線。因為它們可以用不同位置的平面截割直圓錐面而得到，因此又稱為圓錐。到定點的距離與到定直線的距離的比e是常數(shù)的點的軌跡叫做圓錐曲線。兩千多年前，古希臘數(shù)學(xué)家最先開始研究圓錐曲線，并獲得了大量的成果。用垂直于錐軸的平。一個結(jié)束點來定義。其中的控制點確定了線的曲度。<divid="no-canvas"style="display:none">你的瀏覽器不支持2DCanvas. 由拋物線繞其軸旋轉(zhuǎn)，可得到一個叫做旋轉(zhuǎn)物面的曲面。在這個軸上有一個具有奇妙性
【正文】 as = (39。my_canvas39。)。 if() { var context = (2d)。 var rectWidth = var rectHeight = 75。 // 把 context 平移到畫布的中心 (,)。 // y 方向的組成減半 (1,)。 // 順時針旋轉(zhuǎn) 45 度 ()。 =blue。 (rectWidth/2,rectHeight/2,rectWidth,rectHeight)。 // 水平方向翻轉(zhuǎn) context (1,1)。 =30pt Calibri。 =center。 =ffffff。 (Mirror Image,3,10)。 } else { 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 21/25 頁 21 (39。my_canvas39。). = 39。none39。 (39。nocanvas39。). = 39。block39。 } }。 /script /head body section header h12D Canvas section 示例 /h1 /header p canvas id=my_canvas width=600 height=500/canvas div id=nocanvas style=display:none你的瀏覽器不支持 2D Canvas 相關(guān)的技術(shù) /div /p /section /body /html （ 3）執(zhí)行的結(jié)果 平移轉(zhuǎn)換處理的應(yīng)用示例 （ 1）示例代碼 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。my_canvas39。)。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 22/25 頁 22 if() { var context = (2d)。 /* 定義顏色 */ var colors = [red, orange, yellow, green, blue, navy, purple]。 /* 定義線寬 */ = 10。 (1, 0, 0, 1, 100,0) /*循環(huán)繪制圓弧 */ for( var i=0。 i。 i++ ){ /* 定義每次向下移動 10 個像素的變換矩陣 */ (1, 0, 0, 1, 0, 10)。 /* 設(shè)定顏色 */ = colors[i]。 /* 繪制圓弧 */ ()。 (50, 100, 100, 0, , true)。 ()。 } } else { (39。my_canvas39。). = 39。none39。 (39。nocanvas39。). = 39。block39。 } }。 /script /head body section header h12D Canvas section 示例 /h1 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 23/25 頁 23 /header p canvas id=my_canvas width=600 height=500/canvas div id=nocanvas style=display:none你的瀏覽器不支持 2D Canvas 相關(guān)的技術(shù) /div /p /section /body /html （ 2）執(zhí)行的結(jié)果 平移、縮放和旋轉(zhuǎn)等轉(zhuǎn)換處理的應(yīng)用示例 （ 1）實現(xiàn)的目標圖形效果 （ 2）頁面及代碼示例 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= = function() { var canvas = (39。my_canvas39。)。 if() { var context = (2d)。 (150,150)。 // 將 canvas 的原點從 (0,0) 平移至楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 24/25 頁 24 （ 150,150） for (i=1。i=2。i++){// 繪制內(nèi)外 2 層 if ((i % 2) == 1) { = 39。00f39。 } else{ = 39。f0039。 } ()。 // 保持開始繪制每一層時的狀態(tài)一致 for (j=0。j=i*6。j++){ // 每層生成實心圓的數(shù)量 ((3*i))。 // 繞當(dāng)前原點將坐標系順時針旋轉(zhuǎn) (3*i) 度 ()。 (0,60*i,25,0,*2,true)。 ()。 // 使用 fillType 值填充每個實心圓 } ()。 } } else { (39。my_canvas39。). = 39。none39。 (39。nocanvas39。). = 39。block39。 } }。 /script /head body section header h12D Canvas section 示例 /h1 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 25/25 頁 25 /header p canvas id=my_canvas width=600 height=500/canvas div id=nocanvas style=display:none你的瀏覽器不支持 2D Canvas 相關(guān)的技術(shù) /div /p /section /body /html
環(huán)評公示相關(guān)推薦
鄂ICP備17016276號-1