<!DOCTYPE HTML>
<head>
<meta charset = "utf-8">
<title>starGirl</title>
<style type="text/css">
#canvas{
border:1px solid #eee ;
display:block;
background-color: #B36666;
margin: 20px auto;
}
</style>
</head>
<body>
<div>
<canvas id = "canvas" width = "800px" height = "600px"></canvas>
</div>
<script type = "text/javascript" >
window.onload=function(){
var context = document.getElementById(‘canvas‘).getContext(‘2d‘)
//设置高宽，不建议在css里面设置，因为会不准确
canvas.height=800;
canvas.width=800;
arcToText(context,150,100,650,100,400,650,300);
function arcToText(context,x0,y0,x1,y1,x2,y2,R){
context.beginPath();
context.moveTo(x0,y0);
context.arcTo(x1,y1,x2,y2,R);
context.lineWidth=6;
context.strokeStyle=‘red‘;
context.stroke();
context.beginPath();
context.moveTo(x0,y0);
context.lineTo(x1,y1);
context.lineTo(x2,y2);
context.lineWidth=3;
context.strokeStyle=‘yellow‘;
context.stroke();
}
}
</script>
</body>
</html>