??? ????

context: context? ?? ??? ??? ???? ?????. ? ??? ?? ??? var context =canvas.getContext("2d");

??? ? 2d? ?? ??? ???? ???? ????. HTML5??? 3D ???? ???? ???? ?? ????? ?? ???????.

??? ??? ???? ??? ???? ? ??? ????. ?,

context.fill()//Fill

???.

context.Stroke()//??? ???

???: ???? ??? ?? ??? ???? ?????.

context.fillStyle//??? ???

context.StrokeStyle//??? ???

context.lineWidth//??? ??? ??

?? ??:

?? ?? ?? ??: "red" "green" "blue"

16?? ??? ?? ?? ?: "#EEEEFF"

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

rgba(1-255,1-255,1-255, ???)

??? GDI? ???? GDI? ??? ? ???? ?? ??? ? ?? ? ???

???? ??

??? ??

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

?????? ???

????