效果图

wKioL1h_ECixJs5YAABXqgPFJCs442.png-wh_50

html结构

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>canvas19</title>

<link rel="stylesheet" href="">

</head>

<body>

<canvas id="canvas" style ="border:1px solid #aaa;diplay:block;margin:50px auto;">

当前浏览器不支持canvas,请更换浏览器后再试

</canvas>

</body>

</html>

js脚本

<script>

window.onload = function(){

var canvas = document.getElementById("canvas");


canvas.width  = 800;

canvas.height = 800;


var context = canvas.getContext("2d");


context.arc(400,400,300,0.5*Math.PI,1.5*Math.PI,true);

context.moveTo(400,100);

context.arcTo(1200,400,400,700,(400-100)*dis(400,100,1200,400)/(1200-400));

context.stroke();

}


function dis(x1,y1,x2,y2){

return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));

}

</script>

QQ截图20181014143201.jpg