Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
JerryWang
Employee
Employee
0 Kudos


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: