# canvas学习之圆和圆弧的绘制

·  阅读 116

## 学习:绘制圆和圆弧

如下：当我们按顺势针旋转时,圆是从三点钟方向开始旋转，而不是我们平常认为的0点钟。

``````<canvas width="500" height="500" id="mycanvas4"></canvas>
<style>
canvas{
border:solid red 1px;
}
</style>
<script>
let canvas = document.getElementById('mycanvas4')
if (canvas.getContext) {
let ctx = canvas.getContext('2d')
ctx.arc(250, 250, 250,0, Math.PI / 180 * 200 , false)
ctx.stroke()
} else {
console.log('浏览器不支持canvas')
}
</script>
复制代码``````
See the Pen learn canvas 4-1 by 张小春Nathan (@zhangxiaochunxy) on CodePen.

``````<canvas width="500" height="500" id="mycanvas4"></canvas>
<style>
canvas{
border:solid red 1px;
}
</style>
<script>
let canvas = document.getElementById('mycanvas4')
if (canvas.getContext) {
let ctx = canvas.getContext('2d')
ctx.arc(250, 250, 250, 0, Math.PI / 180 * 100, true)
ctx.stroke()
} else {
console.log('浏览器不支持canvas')
}
</script>

See the Pen ExjXOXw by 张小春Nathan (@zhangxiaochunxy) on CodePen.
• arcTo(x1,y1,x2,y2,rudius)这个方法是在已经知道的亮点上画一个弧线，x1和y1是一个点，x2和y2是另外一个点，rudius是弧线半径。需要注意的是，这个方法需要落笔。也就是首先开始用moveTo(x,y)方法。

下面我们举例说明。

``````<canvas width="400" height="400" id="mycanvas"></canvas>
<script>
let canvas = document.getElementById('mycanvas')
if (canvas.getContext){
let ctx = canvas.getContext('2d')
ctx.moveTo(150, 20)
ctx.crcTo(150, 100, 50, 20,30)
ctx.stroke()
}
</script>
复制代码``````