Radar scan effect in BSP

Follow RSS feed Like

0 Likes 657 Views 0 Comments

The code comes from http://blog.csdn.net/cuixiping/article/details/7565574

1. Create a new BSP application with one page:

Paste the code below into main.htm:

<!doctype html>
<head>
<meta charset="utf-8" />
<title>Canvas Test</title>
</head>
<body>
<canvas id="canvas1" width="400" height="300"></canvas>
<script type="text/javascript" src="test.js"></script>
<script>
var img = new Image();
img.src = 'p1.jpg';
img.onload = init();
</script>
</body>
</html>

2. import the following JavaScript code as MIME type test.js to BSP application:

function MyCtx(ctx){
    this.ctx = ctx;
}
(function (map){
    for(var k in map){
        MyCtx.prototype[k] = new Function('this.ctx.'+map[k]+'.apply(this.ctx,arguments); return this;');
    }
}({
    B:'beginPath', M:'moveTo', L:'lineTo', A:'arc', Z:'closePath', f:'fill', dI:'drawImage', cR:'clearRect', clip:'clip', save:'save', restore:'restore'
}));
function init(){
    var ctx = document.getElementById("canvas1").getContext('2d');
    var mtx = new MyCtx(ctx), i=-1;
    mtx.ctx.fillStyle='rgba(0,0,0,0.6)';
    function f(){
        mtx.save().dI(img,0,0).B().A(200,150,250,Math.abs(++i%100)*Math.PI/50,Math.PI*2,(i/100|0)%2).L(200,150).Z().clip().dI(img,-400,0).restore();
        setTimeout(f,60);
    }
    f();
}

3. Import the attached picture into MIME.

Test the application in Chrome:

Alert Moderator

Radar scan effect in BSP

Assigned tags

Related Blog Posts

Related Questions