JS canvas基础摘要 绘制圆弧曲线。
arc() 方法创建弧/曲线(用于创建圆或部分圆)。
注意:Math.PI=180°
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数 | 描述 |
---|---|
x | 圆的中心的 x 坐标。 |
y | 圆的中心的 y 坐标。 |
r | 圆的半径。 |
sAngle | 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。 |
eAngle | 结束角,以弧度计。 |
counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。 |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="MFF">
<meta name="Keywords" content="path">
<meta name="Description" content="path canvas">
<title>Document</title>
<style>
canvas{border:medium red dotted ;margin:4px}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 5;
ctx.fillStyle="red";
ctx.strokeStyle ="black";
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.lineTo(300,200);
ctx.lineTo(200,100);
ctx.lineTo(100,200);
ctx.closePath();
//ctx.rect(200,100,100,100);
//fill()里填充的是fillStyle属性
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(200,250,50,0,Math.PI,true);
ctx.stroke();
ctx.closePath();
</script>
</body>
</html>