canvas Three 各种图形
2017-04-11 本文已影响89人
尤樊容
经过前面的线、三角形，现在是各种图形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(){
//将角度转化为弧度
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
