<! DOCTYPE html>
<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>
<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 ')
Set high width, not recommended in CSS, because it will not be accurate
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>
ArcTo to draw a fox line
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
