經(jīng)過前面的線幌羞、三角形，現(xiàn)在是各種圖形n.n
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: #000;
}
canvas{
background:#fff;
}
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){
//將角度轉(zhuǎn)化為弧度
function d2a(n){
return n*Math.PI/180;
}
var oC = document.getElementById("canvas1");
var gd = oC.getContext("2d");
//不填充矩形
gd.beginPath();
gd.lineWidth = 20;
gd.strokeStyle = "green";
gd.strokeRect(50,50,160,100);//context.strokeRect(x,y,width,height);
//gd.stroke();//這里就不需要用stroke畫了
//填充矩形
gd.beginPath();
gd.lineWidth = 20;
gd.strokeStyle = "green";
gd.fillStyle = "yellow";
gd.strokeRect(300,50,160,100);
gd.fillRect(300,50,160,100);
//不填充圓
gd.beginPath();
//不寫顏色的情況下茶袒，繼承最近的顏色
gd.lineWidth = 20;
gd.arc(130,300,80,d2a(0),d2a(360),false);
gd.closePath();
gd.stroke();
//填充圓
gd.beginPath();
gd.lineWidth = 20;
gd.arc(380,300,80,d2a(0),d2a(360),false);
gd.closePath();
gd.fill();//圓的填充邊框不會被遮蓋
gd.stroke();
//畫弧
gd.beginPath();
gd.lineWidth = 20;
gd.arc(600,300,80,d2a(0),d2a(135),false);
gd.closePath();//不加是不封閉的弧邊
gd.fill();//圓的填充邊框不會被遮蓋
gd.stroke();
},false);
</script>
</head>
<body>
<canvas id="canvas1" width="800" height="600">
瀏覽器需要更新！９╄怠！
</canvas>
</body>
</html>
效果圖：
Paste_Image.png
1、StrokeRect()畫矩形
w3c定義：
Paste_Image.png
2、arc();畫弧
w3c定義：
Paste_Image.png
