1.HTML5 canvas arcTo() 用于在畫布上創(chuàng)建介于兩個(gè)切線之間的弧粘优。但是要注意請使用 stroke() 方法在畫布上繪制確切的弧缨睡。如下圖所示：
2.arcTO（）的JS：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20);// 創(chuàng)建開始點(diǎn)
ctx.lineTo(100,20);// 創(chuàng)建水平線
ctx.arcTo(150,20,150,70,50);// 創(chuàng)建弧
ctx.lineTo(150,120);// 創(chuàng)建垂直線
ctx.stroke();// 進(jìn)行繪制
3.JavaScript 語法：context.fillRect(x1,y1,x2,y2,r);
x1表示弧的起點(diǎn)的 x 坐標(biāo)无虚，y1表示弧的起點(diǎn)的 y 坐標(biāo)，x2表示弧的終點(diǎn)的 x 坐標(biāo),y2表示弧的終點(diǎn)的 y 坐標(biāo)
r表示弧的半徑。
所有代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
<script>
$(function(){
draw();
function draw(){
var canvas = $('#canvas')[0];//轉(zhuǎn)化為JS原生DOM元素
if(!canvas.getContext){
console.log('瀏覽器不支持canvas')聂宾；
return false;
}//檢測瀏覽器是否支持canvas
var ctx =canvas.getContext('2d');
//獲取canvas繪圖的上下文：畫筆
ctx.beginPath();
ctx.moveTo(20,20);? ? ? ? ? // 創(chuàng)建開始點(diǎn)
ctx.lineTo(100,20);? ? ? ? ? // 創(chuàng)建水平線
ctx.arcTo(150,20,150,70,50); // 創(chuàng)建弧
ctx.lineTo(150,120);? ? ? ? // 創(chuàng)建垂直線
ctx.stroke();? ? ? ? ? ? ? ? // 進(jìn)行繪制
}
})
</script>
</html>
