您現在的位置是:電腦技術吧?>? 基礎知識 ??>??你有點睛之筆嗎,點睛之筆的意思是??>??正文詳情

你有點睛之筆嗎,點睛之筆的意思是

城冰真2019-11-06 13:11:24 人圍觀
簡介形容點睛之筆(譯者注:由于譯言編輯對文章中的標簽進行了解析,我在每個標簽符號后面加了一個空格,比如左尖括號 右尖括號,我會寫head,這樣可以在文章中正確地顯示出來。請原

(譯者注:由于yeeyan編輯器對文章中的標簽做解析的原因,我在每個標簽的符號之后都加入了一個空格,比如說,左尖括號 head 右尖括號,我會寫成 head,以便其能夠在文章中正確顯示,不便之處敬請諒解。

)使用HTML5來編寫代碼的人,有著設計者和開發者雙重身份的強悍組合,其職責是構造出高效的富互聯網應用(rich Internet application,RIA),特別是豐富的用戶界面。

就高效這個字眼來說,我的意思是指系統級的和系統性的創造力增強,這種增強以數字化的方式促進了站點所有者、所有者的代理機構和站點用戶之間的對話。

RIA是用戶獲得滿意體驗的來源之處和媒介,因此,它是任何成功的以網絡為中心的風險投資的重要組成部分。

以網絡為中心的活動,就性質來說,或多或少都是協作式的。

公司要在包括了市場營銷和管理的各個層面都取得成功的話,數字化協作的制勝方法是至關重要的。

很多時候的很多情況都取決于效率,網站要依靠效率來滿足其訪問者的品質期望。

正如你已經見到的那樣,HTML5是為這一具有跨平臺能力、融合了通信、使用統一語言、提供無處不在的計算,以及基于開放系統的協作式一網化世界(one web world)量身定做的。

這一文章系列的前面三部分內容重點關注語義、正確的編碼方法、輸入在極為重要的轉化過程中的作用,以及站點管理最佳做法等,所有這些的目的都是在為以一種有組織和符合邏輯的方式來創建RIA奠定基礎。

每篇文章中都共有的一個主題是,對于實現網站所有者的機構目標來說,制造并管理豐富的用戶體驗是至關重要的。

什么是Canvas?HTML5 Canvas(畫布)是一個非常有用的繪圖和動畫元素,Canvas使用JavaScript來直接在頁面上繪制圖形。

這是一個由你來定義和控制的長方形區域,該區域允許動態、可腳本渲染的2D圖形和位圖圖像。

在制作用來增強UI、示意圖、相冊、圖表、圖形、動畫和嵌入式繪圖應用的那些非常棒的視覺材料方面,HTML5堪稱完美。

Canvas元素有一些用來繪制路徑、矩形、圓形和字符的方法。

Canvas的坐標


在畫布上繪圖的一個先決條件是要熟悉網格或是坐標空間,寬度和高度的空間區域測量是以像素為單位給出的。

畫布是基于x和y坐標的使用來構建的,畫布的x=0, y=0坐標位于左上角。

畫布的矩形區域的默認屬性是300像素的寬度和150像素的高度,但你可以通過指定寬度和高度來確定畫布元素的確切大小。

圖1中的示意圖說明了x和y坐標的實現方式。

圖1. Canvas的坐標

圖1給出了一個100像素X100像素的畫布區:1. 左上角是x=0,y=0。

2. x的值水平增加,y的值垂直增加。

3. 右下角是x=100,y=100。

4. 中間的點是x=50,y=50。

開始第一步


要在畫布上放置任何東西的話,你首先必須在HTML文件中定義畫布。

你必須創建訪問 canvas標簽的JavaScript代碼,并通過與HTML5 Canvas API通信來繪制你的圖像。

canvas標簽的基本結構如下: canvas id=myCanvas width=200 height=200 /canvascanvas元素自身有兩個屬性:width和height,除此之外,canvas還擁有所有主要的HTML5屬性,比如說class、id和name等。

id屬性被用在上面所示的代碼中,JavaScript使用這里創建的canvas的id來表示要在上面繪畫的畫布。

JavaScript使用document.getElementById()方法來確定正確的畫布,如下面代碼所示:var canvas = document.getElementById(myCanvas);每個畫布都必須要有一個context(上下文)的定義,如下面代碼所示。

就目前的情況來說,官方規范只承認一個2D環境:var context = canvas.getContext(2d);在標識畫布并指明了它的上下文之后,你就做好了開始繪畫的準備了。

繪圖工具、效果和轉換


在HTML5 Canvas的這一討論過程中,我們對各種繪圖工具、效果和轉換都查看一番。

繪圖工具包括:1. 線條2. 矩形3. 圓弧4. 貝塞爾曲線和二次曲線5. 圓和半圓你會用到的Canvas效果包括:1. 填充和描邊2. 線性和徑向的漸變要討論的轉換包括:1. 縮放2. 旋轉3. 平移繪制線段要在畫布上繪制線段的話,你可以使用moveTo()、lineTo()和stroke()方法,此外,你要使用beginPath()方法來重置當前路徑:1. context.beginPath();2. Context.moveTo(x,y);3. Context.lineTo(x,y);4. Context.stroke(x,y);beginPath()方法開始一條新的路徑,在使用不同的子路徑繪制一條新的線段之前,你必須要使用beginPath()來標明一個繪制過程要遵循的新起點。

在繪制第一條線段時,beginPath()方法的調用不是必須的。

moveTo()方法指明新的子路徑從哪里開始,lineTo()方法創建子路徑。

你可以使用lineWidth和strokeStyle來改變線段的外觀,lineWidth元素改變線段的粗細,strokeStyle改變顏色。

在圖2中,三條線段分別用藍色、綠色和紫色畫了出來。

圖2. 畫有三條不同顏色的線段的畫布

圖2中的線段由清單1中的代碼來創建,藍色的線段有著圓弧形的端點,該線段是由首個context.beginPath()這一開始新路徑的建立的方法來創建的,其后緊跟著:1. context.moveTo(50, 50),該方法把線路的起點置于(x=50, y=50)2. context.lineTo(300,50),該方法標識線段的終點3. context.lineWidth = 10,該屬性是線段的寬度4. context.strokeStyle = #0000FF,該屬性是線段的顏色5. context.lineCap = round,該屬性把端點設成是圓弧狀的6. context.stroke(),該方法真正在畫布上繪制該線段所有線段的長度都是50像素,盡管它們看上去不一樣長這是由線段的線帽(line cap)造成的視覺錯覺。

可用的線帽有三種:1. Context.round (blue)2. Context.square (green)3. Context.butt (purple)默認值對接(butt)線帽是默認值,當你使用圓形(round)或是方形(square)的線帽風格時,線段的長度會增加,加上一段相當于線段寬度的長度。

例如,一個長度為200像素,寬度為10像素,有著圓形或是方形線帽風格的線段,其最終的線段長度是210像素,因為每個線帽都都往線段的每一端加上了5個像素的長度。

而一個長度為200像素,寬度為20像素,有著圓形或是方形的線帽風格的線段的最終長度是220像素,因為每個線帽都往線段每一端加上了10像素的長度。

通過執行和修改清單1中的代碼來更好地理解線段的繪制方式。

清單1. 在畫布上創建三條不同顏色的線段 !DOCTYPE HTML html head titleLine Example /title stylebody {margin: 0px;padding: 0px;}#myCanvas {border: 1px solid #9C9898;} /style scriptwindow.onload = function() {var canvas = document.getElementById(myCanvas);var context = canvas.getContext(2d);// 有著圓形端點的藍色線段context.beginPath();context.moveTo(50, 50);context.lineTo(300,50);context.lineWidth = 10;context.strokeStyle = #0000FF;context.lineCap = round;context.stroke();// 有著方形端點的綠色線段context.beginPath();context.moveTo(50, 100);context.lineTo(300,100);context.lineWidth = 20;context.strokeStyle = #00FF00;context.lineCap = square;context.stroke();// 有著對接端點的紫色線段context.beginPath();context.moveTo(50, 150);context.lineTo(300, 150);context.lineWidth = 30;context.strokeStyle = #FF00FF;context.lineCap = butt;context.stroke();}; /script /head body canvas id=myCanvas width=400 height=200 /canvas /body /html繪制矩形有三個方法可用來在畫布上給出一個矩形的區域:1. fillRect(x,y,width,height),該方法繪制一個有填充的矩形2. strokeRect(x,y,width,height),該方法繪制一個矩形的外邊框3. clearRect(x,y,width,height),該方法清空指定的區域,使之變得完全透明對于這三個方法中的每個來說,x和y表示的都是畫布上相對于矩形(x=0, y=0)的左上角的位置,width和height分別是矩形的寬度和高度。

圖3顯示了由清單2中的代碼創建的三個矩形。

圖3. 畫有矩形的畫布

fillRect()方法創建了一個以缺省的黑色為填充色的矩形;clearRect()方法在第一個矩形的中心部分清除出一個矩形區域,該區域位于由fillRect()方法產生的矩形的中央位置;strokeRect創建了一個只有可見的黑色邊框的矩形。

清單2. 矩形畫布的代碼 !DOCTYPE HTML html head titleRectangle Example /title stylebody {margin: 0px;padding: 0px;}#myCanvas {border: 1px solid #000000;background-color: #ffff00;} /style script type=text/javascriptfunction drawShape(){var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');context.fillRect(25,25,50,50);context.clearRect(35,35,30,30);context.strokeRect(100,100,50,50);} /script /head body onload=drawShape(); canvas id=myCanvas width=200 height=200 /canvas /body /html繪制圓弧、曲線、圓和半圓圓和半圓都是使用arc()方法來繪制,arc()方法用到了六個參數:context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);centerX和centerY參數是圓的中心坐標,radius就是數學上的半徑:從圓心到圓周線的一條直線。

弧形是作為所定義的圓的一部分來創建的,startAngle和endAngle參數分別是圓弧的起點和終點,以弧度為單位。

anticlockwise參數是一個布爾(Boolean)值,當其值為true時,弧形按逆時針方向來繪制,當其值為false時,弧形按順時針方向來繪制。

要使用arc()方法來繪制圓的話,把起始角度定義成0,把結束角度定義成2*PI,如下所示:context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);要使用arc()方法來繪制半圓的話,把結束角度定義成startingAngle PI,如下所示:context.arc(centerX, centerY, radius, startingAngle, startingAngle Math.PI, false);二次曲線quadraticCurveTo()方法被用來創建一條二次曲線,如下所示。

二次曲線通過上下文中的點、一個控制點以及一個結束點來定義。

控制點確定了線的曲度。

context.moveTo(x, y);context.quadraticCurveTo(controlX, controlY, endX, endY);貝塞爾曲線正和二次曲線一樣,貝塞爾曲線也有一個起點和一個終點,但和二次曲線不同的是,它有兩個控制點:context.moveTo(x, y);context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);你可使用bezierCurveTo()方法來創建貝塞爾曲線,因為貝塞爾曲線是由兩個控制點而不僅是由一個控制點來定義的,所有你可以創造出更加復雜的曲度來。

圖4的顯示從左到右為一條圓弧、一條二次曲線、一條貝塞爾曲線、一個半圓和一個圓。

圖4. 圓弧、曲線和圓

圖4的內容是用清單3中的代碼來創建的。

清單3. 圓弧、曲線和圓的代碼 !DOCTYPE HTML html head titleArcs, Curves, Circles, Semicircles /title stylebody {margin: 0px;padding: 0px;}#myCanvas {border: 1px solid #9C9898;} /style scriptfunction drawArc(){var canvas = document.getElementById(myCanvas);var context = canvas.getContext(2d);var centerX = 100;var centerY = 160;var radius = 75;var startingAngle = 1.1 * Math.PI;var endingAngle = 1.9 * Math.PI;var counterclockwise = false;context.arc(centerX, centerY, radius, startingAngle,endingAngle, counterclockwise);context.lineWidth = 10;context.strokeStyle = black;context.stroke();};function drawQuadratic(){var canvas = document.getElementById(myCanvas);var context = canvas.getContext(2d);context.moveTo(200, 150);var controlX = 288;var controlY = 0;var endX = 388;var endY = 150;context.quadraticCurveTo(controlX, controlY, endX, endY);context.lineWidth = 10;context.strokeStyle = black;context.stroke();};function drawBezier(){var canvas = document.getElementById(myCanvas);var context = canvas.getContext(2d);context.moveTo(350, 350);var controlX1 = 440;var controlY1 = 10;var controlX2 = 550;var controlY2 = 10;var endX = 500;var endY = 150;context.bezierCurveTo(controlX1, controlY1, controlX2,controlY2, endX, endY);context.lineWidth = 10;context.strokeStyle = black;context.stroke();};function drawCircle(){var canvas = document.getElementById(myCanvas);var context = canvas.getContext(2d);var centerX = 450;var centerY = 375;var radius = 70;context.beginPath();context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);context.fillStyle = #800000;context.fill();context.lineWidth = 5;context.strokeStyle = black;context.stroke();};function drawSemicircle(){var canvas = document.getElementById(myCanvas);var context = canvas.getContext(2d);var centerX = 100;var centerY = 375;var radius = 70;var lineWidth = 5;context.beginPath();context.arc(centerX, centerY, radius, 0, Math.PI, false);context.closePath();context.lineWidth = lineWidth;context.fillStyle = #900000;context.fill();context.strokeStyle = black;context.stroke();};window.onload = function (){drawArc();drawQuadratic();drawBezier();drawCircle();drawSemicircle()} /script /head body canvas id=myCanvas width=600 height=500 /canvas /body /html轉換:平移、縮放和旋轉translate()、scale()和rotate()方法都會修改當前的矩陣。

translate(x, y)方法把畫布上的項目移動到網格上的不同點上,在translate(x, y)方法中,(x,y)坐標指明了圖像在x方向和y方向上應該移動的像素數。

如果你使用drawImage()方法來在(15,25)這一位置繪制一個圖像的話,你可以使用(20,30)作為參數的來調用translate(),該調用把圖像放在(15 20, 25 30) = (35, 55)這一位置上。

scale(x,y)方法改變圖像的大小,x參數指明水平方向的比例系數,y參數指明垂直方向的比例系數。

例如,scale(1.5, .75)將創建一個在x方向加大50%,而在y方向只相當于當前尺寸75%的圖像。

rotate(angle)方法返回一個基于指定角度的對象。

圖5是一個可以使用translate()、scale()和rotate()進行渲染的圖像例子。

圖5. 使用轉換

清單4提供的代碼創建了圖5中的圖像。

清單4. 創建轉換的代碼 !DOCTYPE HTML html head TitleTransformations Example /title scriptwindow.onload = function() {var canvas=document.getElementById(myCanvas);var context=canvas.getContext(2d);var rectWidth = 250;var rectHeight = 75;// 把context平移到畫布的中心context.translate(canvas.width/2,canvas.height/2);// y方向的組成減半context.scale(1,0.5);// 順時針旋轉45度context.rotate(-Math.PI/4);context.fillStyle=blue;context.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight);// 水平方向翻轉contextcontext.scale(-1,1);context.font=30pt Calibri;context.textAlign=center;context.fillStyle=#ffffff;context.fillText(Mirror Image,3,10);} /script /head body canvas id=myCanvas width=400 height=400 /canvas /body /html漸變


漸變(gradient)是指從一種顏色向另一種顏色變化的填充,在顏色相交的地方做融合。

在Canvas中你可以創建兩種類型的漸變:線性的和徑向的。

createLinearGradient()方法被用來創建線性的漸變。

createLinearGradient(x0,y0,x1,y1)沿著一條由兩個點(x0,y0)和(x1,y1)來標識的直線產生一個漸變,這兩個點分別是漸變的起點和終點。

該方法返回一個對象。

顏色的漸變可以有多種顏色,addcolorStop(offset, color) 方法為被標明為在給定的偏移量上漸變的顏色指明了顏色過渡點。

addColorStop()方法讓你在0和1之間指定一個偏移量,以這一偏移量為依據來開始過渡到下一種顏色。

值0是漸變的一端的偏移量,1是另一端的偏移量。

在顏色的漸變定義好了之后,漸變對象就可以被賦值給fillStyle()。

你也可以使用fillText()方法來繪制出帶有漸變的文字來。

徑向漸變createradialGradient(x0,y0,r0,x1,y1,r1)使用六個參數以一種圓形或是圓錐形的模式來組合兩種或多種顏色。

1. (x0,y0): 圓錐的第一個圓的中心2. r0:第一個圓的半徑3. (x1,y1):圓錐的第二個圓的中心4. r1:第二個圓的半徑圖6包含了四種漸變:一個線性漸變、一個文本漸變、一個對角線上的漸變和一個徑向漸變。

圖6. 漸變的例子

圖6的內容是使用清單5中的代碼創建出來的。

清單5. 漸變的例子代碼 !doctype html head titleGradient Example /title scriptwindow.onload = function() {var canvas = document.getElementById(myCanvas);var context = canvas.getContext(2d);//在一個矩形中嘗試做漸變// 創建一個線性漸變var fillColor = context.createLinearGradient(50,50, 150,50);// 設置漸變的顏色fillColor.addColorStop(0.15,red);fillColor.addColorStop(0.35,black);fillColor.addColorStop(0.65,green);fillColor.addColorStop(0.87,yellow);// 把漸變對象賦值給fillstylecontext.fillStyle= fillColor;// 繪制矩形context.fillRect(50,50,100,100);// 使用文本var fillColorText = context.createLinearGradient(300,50,600,50);fillColorText.addColorStop(0.2,red);fillColorText.addColorStop(0.4,black);fillColorText.addColorStop(0.6,green);fillColorText.addColorStop(0.8,yellow);context.fillStyle= fillColorText;context.font=40px verdana;context.textBaseline=top;context.fillText(With text too!, 300,50)// 對角線上的漸變var fillColordiagonal = context.createLinearGradient(50,200, 100,450);// 漸變顏色fillColordiagonal.addColorStop(0.2,red);fillColordiagonal.addColorStop(0.4,black);fillColordiagonal.addColorStop(0.6,green);fillColordiagonal.addColorStop(0.75,yellow);// 把漸變對象賦值給fillstylecontext.fillStyle= fillColordiagonal;// 繪制矩形context.fillRect(50,225, 100,250);// 繪制徑向漸變fillColorRadial = context.createRadialGradient(450,300,0, 450,300,200);fillColorRadial.addColorStop(0, red);fillColorRadial.addColorStop(0.2, black);fillColorRadial.addColorStop(0.4, green);fillColorRadial.addColorStop(0.7, yellow);context.fillStyle = fillColorRadial;context.rect(300,200,500,400);context.fill();} /script /head body div p canvas id=myCanvas width=600 height=400 /canvas /p /div /body /html圖像剪裁


你可以通過裁剪出選定的區域來改變圖像。

在畫布上裁剪是一項重載drawImage()方法的功能,drawImage()有三種選擇,你可以使用三個、五個或者是九個參數。

三個參數的配置drawImage(image, dx, dy)在目標坐標(dx,dy)上繪制圖形。

坐標構成了圖像的左上角。

五個參數的配置drawImage(image, dx, dy, dw, dh)提供了目標的寬度和高度,圖像會被縮放以適應目標寬度和高度。

九個參數的配置drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)用到一個圖像,以圖像來源的(sx,sy)坐標為開始剪出一個寬度和高度為(sw,sh)的矩形區域,并把它縮放使之適應目標寬度和高度(dw,dh),然后把它放置在畫布的(dx,dy)位置上。

圖7顯示了你將要對其做剪裁的圖像。

圖7. 剪裁圖像

通過利用圖7中給出的圖像,可以把一組圖像放置在畫布上。

一個圖像有畫布大小,被用作背景,另一個被創建的圖像較小一些,被插入到畫布的右下角上,第三個圖像是一個切出來的拿破侖的頭像,被放置在畫布的左上角上。

裁剪后的圖像的最后情況如圖8所示。

圖8. 最終裁剪出來的圖像

圖8中的內容是使用清單6中的代碼創建出來的。

在執行這一代碼之前,確保已下載了這一例子中用到的Napolean.png圖像。

清單6. 用來裁剪例子圖像的代碼 !doctype html head titleCrop Example /title script type=text/javascriptwindow.onload = function() {var canvas=document.getElementById(cropNapolean);var context=canvas.getContext(2d);var imageObj = new Image();imageObj.onload = function() {// 繪制圖像覆蓋整個畫布context.drawImage(imageObj,0,0, 600, 400);// 在右下角繪制一個小圖像var sourceX = 0;var sourceY = 0;var sourceWidth = 1200;var sourceHeight = 801;var destX = 300;var destY = 200;var destWidth = sourceWidth - 900;var destHeight = sourceHeight - 600;context.drawImage(imageObj, sourceX, sourceY, sourceWidth,sourceHeight, destX, destY, destWidth, destHeight);//只繪制拿破侖的頭部var sourceNapoleanX = 460;var sourceNapoleanY = 25;var sourceNapoleanWidth = 250;var sourceNapoleanHeight = 175;var destNapoleanX = 0;var destNapoleanY = 0;var destNapoleanWidth = sourceNapoleanWidth - 150 ;var destNapoleanHeight = sourceNapoleanHeight - 100;context.drawImage(imageObj, sourceNapoleanX, sourceNapoleanY,sourceNapoleanWidth, sourceNapoleanHeight,destNapoleanX, destNapoleanY,destNapoleanWidth, destNapoleanHeight);}imageObj.src = Napoleon.png;} /script /head body div p canvas id=cropNapolean width=600 height=400 /canvas /p /div /body /html動畫和多重畫布


要處理動畫方面的內容的話,分層問題總是不可避免的。

分層允許組件被隔開開來,這使得編碼和調試變得更容易且更高效。

Canvas API并未有分層的處理,但你可以創建多重的畫布。

動畫必須是隨著時間的推移來做控制的,因此,要創建一個動畫的話,你需要處理動畫的每一幀內容。

Canvas API在動畫方面有一個主要的限制是:在某個形狀被放置到畫布上之后,它就一直保持它的樣子不變了,要移動該形狀的話,你必須要重新繪制它。

要創建一個動畫的話:1. 清除掉之前在畫布上繪制的任何圖像。

2. 保存畫布的狀態,確保在每次繪制一個幀的時候都是使用最初的狀態。

3. 執行渲染幀的步驟。

4. 如果你已經保存了狀態的話,在繪制新的幀之前恢復該狀態。

你可以以兩種方式來控制動畫:使用setInterval或者setTimeout方法,每個方法都可以用來在超過某個設定時間段時調用一個函數。

setInterval函數重復地執行所提供的代碼,setTimeout函數只在所提供的時間過去之后執行一次。

圖9展示了游泳者的多重畫布動畫的一幀,水畫在一幅畫布上,游泳的人則畫在另一幅畫布上。

圖9. 用到多重畫布的圖像的動畫

清單7中的代碼被用來創建游泳者,代碼使用一個線性漸變來創建水的效果。

水有四種藍色色調,這提供了一種合理的水的假象。

游泳者的動作通過使用positionX和positionY的值來創建,這兩個值改變圖像所擺放的樣子。

游泳者的頭使用arc()方法來創建,游泳者的腿和雙臂則是通過繪制線段然后改變他們的lineTo()位置來創建,軀干則是通過修改moveTo()的位置來發生變化。

因為這是一個動畫,因此你需要執行這一段代碼來看一下游泳者是如何運動的。

清單7. 動畫例子 !DOCTYPE HTML html head titleAnimation Multiple Canvas Example /title script// 水的畫布function drawWater() {var canvasWater = document.getElementById(myWaterCanvas);var contextWater = canvasWater.getContext(2d);contextWater.globalAlpha = .50 ;// 創建一個線性漸變的填充var linearGrad = contextWater.createLinearGradient(0,0,400,400);linearGrad.addColorStop(0, '#0000ff'); // sets the first colorlinearGrad.addColorStop(.25, '#0099ff'); // sets the second colorlinearGrad.addColorStop(.50, '#00ccff'); // sets the third colorlinearGrad.addColorStop(.75, '#00ffff'); // sets the fourth colorcontextWater.fillStyle = linearGrad;contextWater.fillRect(0,0,400,400);}// 游泳者的畫布setInterval(drawSwimmer, 30);var positionX = 0;var positionY = 0;function drawSwimmer(){var canvasSwimmer = document.getElementById(mySwimmerCanvas);var contextSwimmer = canvasSwimmer.getContext(2d);contextSwimmer.clearRect(0,0,400,400);if (positionX 30){positionX = 1;positionY = 1;}else{positionX = 0;positionY = 0;}contextSwimmer.save();// 繪制一個圓作為頭部var centerX = 200;var centerY = 50;var radius = 20;contextSwimmer.beginPath();contextSwimmer.arc(centerX, centerY positionY,radius, 0, 2 * Math.PI, false);contextSwimmer.fillStyle = #000000;contextSwimmer.fill();contextSwimmer.lineWidth = 5;// 軀干部分contextSwimmer.beginPath();contextSwimmer.moveTo(200,70 positionY);contextSwimmer.lineTo(200,175);contextSwimmer.lineWidth = 10;contextSwimmer.strokeStyle = #000000;contextSwimmer.lineCap = round;contextSwimmer.stroke();// 畫右邊的手臂contextSwimmer.beginPath();contextSwimmer.moveTo(200, 100);contextSwimmer.lineTo(175-positionX,140-positionY);contextSwimmer.lineWidth = 10;contextSwimmer.strokeStyle = #000000;contextSwimmer.lineCap = round;contextSwimmer.stroke();// 畫左邊的手臂contextSwimmer.beginPath();contextSwimmer.moveTo(200, 100);contextSwimmer.lineTo(225 positionX,140-positionY);contextSwimmer.lineWidth = 10;contextSwimmer.strokeStyle = #000000;contextSwimmer.lineCap = round;contextSwimmer.stroke();// 畫右邊的腿contextSwimmer.beginPath();contextSwimmer.moveTo(200, 175);contextSwimmer.lineTo(190-positionX,250-positionY);contextSwimmer.lineWidth = 10;contextSwimmer.strokeStyle = #000000;contextSwimmer.lineCap = round;contextSwimmer.stroke();// 畫左邊的腿contextSwimmer.beginPath();contextSwimmer.moveTo(200, 175);contextSwimmer.lineTo(210 positionX,250-positionY);contextSwimmer.lineWidth = 10;contextSwimmer.strokeStyle = #000000;contextSwimmer.lineCap = round;contextSwimmer.stroke();contextSwimmer.restore();}; /script /head body onload=drawWater(); canvas id=myWaterCanvas width=400 height=400 style=z-index: 2;position:absolute;left:0px;top:0px; /canvas canvas id=mySwimmerCanvas width=400 height=400 style=z-index: 1;position:absolute;left:0px;top:0px; /canvas /body /html結論


HTML5的畫布是基于瀏覽器的RIA的結構核心,其提供了一種以JavaScript和你的想像力為驅動力的實用的繪圖環境。

學習它真的不是很難,并且網絡上有許多培訓和學習所需的支持工具,其中包括了速查表、博客、在線文章、視頻和非視頻教程,以及示例應用程序等。

可視化地修改文本和圖像以及模擬運動的能力使得Canvas變成了一個極其有價值的工具,無論你是從設計者還是開發者的角度來熟悉它,無論你是使用Canvas來構建運行在移動設備上的游戲應用,還是僅僅想增強屏幕這一整體資源的利用情況,Canvas都是HTML5體驗的重要組成部分。

版權聲明:本文由 城冰真 整理編輯。

原標題:點睛之筆的理解,點睛之筆的詞

轉載注明出處:http://www.dn9ww09s.icu/basics/11311.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦運行內存小怎么辦,怎么增加電腦運行內存

    電腦運行內存小怎么辦,怎么增加電腦運行內存 相關圖片電腦怎么增加內存計算機長時間使用后,隨著安裝軟件的增加,計算機的可用內存會減少,特別是C盤內存不足時,會導致計算機的運行速度下降這會影響用戶的使用,那么如何應對呢?...

  • 什么的威力,威力

    什么的威力,威力 相關圖片手榴彈的威力(譯者注:由于譯言編輯對文章中的標簽進行了解析,我在每個標簽符號后面加了一個空格,比如左尖括號 右尖括號,我會寫head,這樣可以在文章中正確地顯示出來。請原...

  • 內存ddr3和ddr4的區別,內存ddr4

    內存ddr3和ddr4的區別,內存ddr4 相關圖片內存ddr5在整機短板開始由CPU和顯卡向存儲設備轉變后,內存和固態硬盤逐漸成為主要的升級對象隨著DDR3多年占領市場,存儲器的發展也開始出現新的變化自2014年底以來,具4代內存條和...

  • 螺旋,ai如何做螺旋效果

    螺旋,ai如何做螺旋效果 相關圖片光線螺旋方式讓我們看看添加步驟1后的文本效果:使用螺旋工具繪制螺旋步驟2:根據情況從中心刪除多余的節點步驟3:復制一個并適當調整大小步驟4:調整兩個螺旋的位置以對齊中心...

  • 0x000000ed藍屏代碼,藍屏代碼0x0000000a

    0x000000ed藍屏代碼,藍屏代碼0x0000000a 相關圖片電腦藍屏代碼0x0000001a藍屏是windows系統在計算機故障時的保護措施。我們可以從藍屏界面提供的藍屏代碼中找到問題和解決方案本文將分享計算機藍屏代碼0x000000ed產生的原因和解電腦藍...

  • 網頁默認字體,如何修改網頁默認字體

    網頁默認字體,如何修改網頁默認字體 相關圖片網頁字體以字體為例,每個瀏覽器的默認字體類型、字體大小和字體行高都不同。例如,當IE8的中文版在WindowsXP中顯示網頁時,默認字體是宋體,而英文版則肯定不是這樣因網頁一般用...

  • 遠程桌面,anydesk遠程桌面連接不上

    遠程桌面,anydesk遠程桌面連接不上 相關圖片anydesk怎么遠程控制計算機已進入家家戶戶如果您需要使用遠程桌面,并且在使用計算機的過程中不知道如何使用計算機的遠程程序,可以使用任意桌面它的尺寸很小它的尺寸只有1米多,...

  • 筆記本電腦怎么連wifi熱點,筆記本電腦怎么連接wifi

    筆記本電腦怎么連wifi熱點,筆記本電腦怎么連接wifi 相關圖片筆記本熱點怎么連接筆記本電腦設置WiFi熱點非常方便它可以被其他移動設備使用,如筆記本和支持無線互聯網接入的移動電話只要設置了WiFi熱點,手機就可以通過電腦的WiFi接入互聯網...

  • 搖滾字體,搖滾字體設計

    搖滾字體,搖滾字體設計 相關圖片搖滾海報一用你喜歡的字體鍵入一個200px的金色字符(我用的是豐富的超級歌曲),然后看下面的操作2這是核心步驟,就是應用震動變形的參數增量來制作搖滾波3最后,給金色的角字體...

  • 電腦遠程控制手機,手機如何遠程控制電腦

    電腦遠程控制手機,手機如何遠程控制電腦 相關圖片怎么遠程控制別人的電腦如果計算機是由某種方式控制的,那么我們就可以遠距離地維護和控制計算機遙控器還可以實現計算機的統一布置,在教學中起到很大的作用你聽說過用手機遙...

熱評文章

  • 藍屏0x000000f7怎么辦,藍屏0x0000001E

    藍屏0x000000f7怎么辦,藍屏0x0000001E 相關圖片藍屏 0x000000f4在計算機操作中,有時會遇到藍屏故障,這可能是由于使用過程中處理不當造成的無論是沒有重新安裝系統,還是以后重新安裝系統,還是出現藍屏,都說明是計算機硬件的...

  • 筆記本連接wifi后無法上網,筆記本怎么連接wifi

    筆記本連接wifi后無法上網,筆記本怎么連接wifi 相關圖片電腦連接wifi如今,筆記本電腦非常普遍,便于辦公室使用和攜帶但一些用戶表示,他們不知道如何將筆記本電腦連接到WiFi?事實上,連接互聯網的方式有很多種,比如網絡電纜連接和...

  • 瀏覽器打開在右下角,瀏覽器右下角彈窗怎么關

    瀏覽器打開在右下角,瀏覽器右下角彈窗怎么關 相關圖片每次打開網頁右下角都有廣告今天,我將介紹一個常見的網頁右下角布局示例實際上,它的實現非常簡單,即使用相對定位和絕對定位這里,我想使用絕對定位:CSS代碼部分:HTML部分:...

  • 筆記本電腦開機黑屏,筆記本電腦開機黑屏了怎么辦

    筆記本電腦開機黑屏,筆記本電腦開機黑屏了怎么辦 相關圖片筆記本電腦突然黑屏無法開機筆記本電腦因其辦公方便、社交方便等優點受到年輕人的廣泛追捧但是筆記本電腦的散熱性能不是很好,在使用過程中經常會出現一些小插曲例如,打開筆...

  • 紅墻背景,網紅墻背景

    紅墻背景,網紅墻背景 相關圖片網紅墻圖片大學生喜歡在墻上或街上的廣告牌上寫“我會永遠”這樣的字眼,不雅致……如果我在網上做一個墻的效果,自己涂鴉,相信MM也會喜歡D~!哈哈!好吧,胡說首先,創建一個...

  • Windows XP,Windows XP Mode

    Windows XP,Windows XP Mode 相關圖片Windows XP下載Windows XP SP3簡體中文卷Microsoft原始下載XP免費升級win10...

  • 固態和硬盤有什么區別,機械硬盤和固態硬盤的區別

    固態和硬盤有什么區別,機械硬盤和固態硬盤的區別 相關圖片固態硬盤是什么在傳統的計算機配置中,硬盤是普通硬盤,但隨著科學技術的進步,出現了固態硬盤,并有逐漸取代普通硬盤的趨勢那么,它是普通硬盤還是固態硬盤呢?普通硬盤和固...

  • 顏色color,color是什么顏色

    顏色color,color是什么顏色 相關圖片brown是什么顏色首先,border color的語法代碼如下:元素選擇器{-Moz border top colors:color color;/*top border*/-Mteal是什么顏色...

  • 四千買什么筆記本推薦,辦公筆記本推薦買什么

    四千買什么筆記本推薦,辦公筆記本推薦買什么 相關圖片筆記本買什么好如果你想買一個筆記本,卻發現自己只有3000元,而一個更好的筆記本需要5000元以上才能買到,你該怎么辦?沒關系。事實上,3000元可以用來買對筆記本還有很多選學生...

  • 圓孔,開圓孔

    圓孔,開圓孔 相關圖片圓孔和卵圓孔效果:1創建一個300*300文檔并繪制一個220*180的矩形,顏色為?333333 2寫一個大小為250的數字(該值應填寫在屬性中)我寫5個嘗試選擇粗體字體卵圓孔未閉...

關注微信

变脸官网查询