本節(jié)主要涉及繪制矩形的操作燕垃，內(nèi)容比較簡(jiǎn)單俏橘。
一允华、繪制實(shí)心矩形
調(diào)用fillRect(x,y,w,h) 方法可以繪制一個(gè)實(shí)心矩形，參數(shù)分別表示x寥掐，y軸坐標(biāo)和矩形的寬靴寂、高。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas演示繪制矩形</title>
<script type="text/javascript">
window.onload=function(){
//獲取canvas對(duì)象的context（繪圖上下文）
var context=document.getElementById('canvas').getContext("2d");
//繪制實(shí)心矩形
context.fillRect(50,50,200,100);
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
在瀏覽器中查看效果：
實(shí)心矩形效果
二召耘、美化矩形
如圖黑乎乎的實(shí)心矩形真是不怎么美觀百炬，接下來(lái)我們嘗試美化一下。先讓矩形換個(gè)顏色污它，然后添加一個(gè)外邊框剖踊。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas演示繪制矩形</title>
<script type="text/javascript">
window.onload=function(){
//獲取canvas對(duì)象的context（繪圖上下文）
var context=document.getElementById('canvas').getContext("2d");
//設(shè)置填充色
context.fillStyle="bisque";
//設(shè)置邊框?qū)挾? context.lineWidth=2;
//設(shè)置邊框顏色
context.strokeStyle="red";
//繪制實(shí)心矩形
context.fillRect(100,100,300,100);
//繪制矩形邊框(空心矩形)
context.strokeRect(100,100,300,100);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
瀏覽效果：
美化之后的效果
PS:恭喜你庶弃，又Get了新技能！
