Mobile-Web-App: HTML5: draw quadratic Bézier curve using quadraticCurveTo()

Tuesday, January 24, 2012

HTML5: draw quadratic Bézier curve using quadraticCurveTo()

The quadraticCurveTo(cpx, cpy, x, y) method must ensure there is a subpath for (cpx, cpy), and then must connect the last point in the subpath to the given point (x, y) using a quadratic Bézier curve with control point (cpx, cpy), and must then add the given point (x, y) to the subpath.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;
 
 //get element by ID of "mycanvas"
 canvas = document.getElementById("mycanvas");
 
 //create a "2d" context object
 context = canvas.getContext("2d");
 
 drawPath(context);
}

function drawPath(c){

 c.lineWidth = 3;
 
 c.strokeStyle = "#ff0000";
 c.beginPath();
 c.moveTo(150, 100)
 c.quadraticCurveTo(100,200,100,150); //(cpx, cpy, x, y)
 c.stroke();
 
 c.strokeStyle = "#00ff00";
 c.beginPath();
 c.moveTo(150, 100)
 c.quadraticCurveTo(250,200,100,150); //(cpx, cpy, x, y)
 c.stroke();
 
 c.strokeStyle = "#0000ff";
 c.beginPath();
 c.moveTo(200, 150)
 c.quadraticCurveTo(300,250,250,100); //(cpx, cpy, x, y)
 c.closePath();
 c.stroke();
 
}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="400" height="300">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Mobile-Web-App

Tuesday, January 24, 2012

HTML5: draw quadratic Bézier curve using quadraticCurveTo()

No comments:

Post a Comment