HTML5 's canvas is very powerful. The use of its canvas can easily draw Bezier curve, for everyone to use later, special to share the implementation code, there is a need for friends can refer to the
The code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> draw Bezier curves with HTML5 canvas canvas </title>
<body>
<div>
<a href= "http://keleyi.com/a/bjac/j77m9131.htm" target= "_blank" > Original </a></div>
<canvas id= "keleyi_com" height= "width=" ></canvas>
<script type= "Text/javascript" >
function Draw (ID)
{
var Canvas=document.getelementbyid (ID);
if (canvas==null)
return false;
var context=canvas.getcontext (' 2d ');
Context.fillstyle= "#eeeeff";
Context.fillrect (0,0,400,300);
var n=0;
var dx=150;
var dy=150;
var s=100;
Context.beginpath ();
Context.globalcompositeoperation= ' and ';
Context.fillstyle= ' RGB (100,255,100) ';
Context.strokestyle= ' RGB (0,0,100) ';
var x=math.sin (0);
var y=math.cos (0);
var dig=math.pi/15*11;
for (Var i=0;i<30;i++)
{
var x=math.sin (I*dig);
var y=math.cos (I*dig);
Context.beziercurveto (dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
}
Context.closepath ();
Context.fill ();
Context.stroke ();
}
Draw ("keleyi_com");
</script>
</body>
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
