Animated clipping
Animation always adds life. So, we implement the knowledge of animation gained from Chapter 3, Animations.
The output can be shown as follows:
How to do it
The following is the code for the recipe:
The HTML code:
<html>
<head>
<title>Image</title>
<script src="AnimatedClipping.js"></script>
</head>
<body onload="init();">
<center>
<canvas id="MyCanvasArea" width="500" height="500" style="border:2px solid blue;" >
your browser does not support canvas
</canvas>
<h1>Clipping</h1>
</center>
</body>
</html>The JavaScript code:
var can;
var ctx;
var boyimage;
var x,y;
var imageData;
var imgPixels;
var clipX,clipY,radius;
var imageObj;
var xFactor=0;
var bounce=-1;
var clipVX,clipVY;
function init()
{
can = document.getElementById('MyCanvasArea'),
ctx = can.getContext('2d');
x=10;y=10;
clipX=250;
clipY=100;
radius=70;
imageObj=new Image();
imageObj.src="ohams.jpg";...
