亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Canvas基本知識(shí)

? ?context:context是一個(gè)封裝了很多繪圖功能的對(duì)象,獲取這個(gè)對(duì)象的方法是 var context?=canvas.getContext("2d");

????????也許這個(gè)2d勾起了大家的無(wú)限遐想,但是很遺憾的告訴你html5不提供3d服務(wù)。


??? canvas元素繪制圖像的時(shí)候有兩種方法,分別是

??????? context.fill()//填充

??????? context.stroke()//繪制邊框

???

??? style:在進(jìn)行圖形繪制前,要設(shè)置好繪圖的樣式

??????? context.fillStyle//填充的樣式

??????? context.strokeStyle//邊框樣式

? ? ? ? context.lineWidth//圖形邊框?qū)挾?/strong>

???

??? 顏色的表示方式:

???????? 直接用顏色名稱(chēng):"red" "green" "blue"

???????? 十六進(jìn)制顏色值: "#EEEEFF"

?????????rgb(1-255,1-255,1-255)

?????????rgba(1-255,1-255,1-255,透明度)

?和GDI是如此的相像,所以用過(guò)GDI的朋友應(yīng)該很快就能上手


繼續(xù)學(xué)習(xí)
||
<!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <title>php中文網(wǎng)</title>  </head> <body> <canvas id="demoCanvas" width="500" height="500"> <p>請(qǐng)使用支持HTML5的瀏覽器查看本實(shí)例</p> </canvas> <!---下面將演示一種繪制矩形的demo---> <script type="text/javascript"> //第一步:獲取canvas元素 var canvasDom = document.getElementById("demoCanvas"); //第二步:獲取上下文 var context = canvasDom.getContext('2d'); //第三步:指定繪制線(xiàn)樣式、顏色 context.strokeStyle = "red"; //第四步:繪制矩形,只有線(xiàn)。內(nèi)容是空的 context.strokeRect(10, 10, 190, 100); //以下演示填充矩形。 context.fillStyle = "blue"; context.fillRect(110,110,100,100); </script> </body> </html>
提交重置代碼