Canvas繪製矩形
繪製矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
# x:矩形起點橫座標(座標原點為canvas左上角的,當然確切確切地的來說是原始原點,後面寫到變形的時候你就懂了,現在暫時不用關係)
y:矩形起點縱座標
width:矩形長度
height:矩形高度
建立HTML頁面,設定畫布標籤
寫js,取得畫布dom物件
透過canvas標籤的Dom物件取得上下文
設定繪製樣式、顏色
繪製矩形,或填入矩形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="demoCanvas" width="500" height="500"> <p>请使用支持HTML5的浏览器查看本实例</p> </canvas> <!---下面将演示一种绘制矩形的demo---> <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>