Canvas基本知識

context:context是封裝了許多繪圖功能的對象，取得這個對象的方法是var context =canvas.getContext("2d");

也許這個2d勾起了大家的無限遐想，但很遺憾的告訴你html5不提供3d服務。

canvas元素繪製影像的時候有兩種方法，分別是

context.fill()//填入

context.stroke()//繪製邊框

style:在進行圖形繪製前，請設定繪圖的樣式

# context.fillStyle//填入的樣式

context.strokeStyle//邊框樣式 #/1#o 寬度

顏色的表示方式:

直接使用色彩名稱:"red" "green" "blue制顏色值: "#EEEEFF"

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

和GDI是如此的相像，所以用過GDI的朋友應該很快就能上手

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</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"; //第四步：绘制矩形，只有线。内容是空的 context.strokeRect(10, 10, 190, 100); //以下演示填充矩形。 context.fillStyle = "blue"; context.fillRect(110,110,100,100); </script> </body> </html>

提交重置程式碼

自動運行