<!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;
canvas = document.getElementById("mycanvas");
context = canvas.getContext("2d");
rotateCenter(context);
drawPath(context);
}
//Rotate canvas
function rotateCenter(c){
c.setTransform(1,0,0,1,0,0); //identity matrix
var angle = 30 * Math.PI/180; //angle in radians
c.rotate(angle);
}
function drawPath(c){
c.fillStyle = "#000000";
c.fillRect(100, 0, 50, 50); //( X, Y, WIDTH, HEIGHT)
}
</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>
<canvas id="mycanvas" style="border: 5px solid;" width="400" height="350">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>
Related:
- HTML5 Canvas@((Context.(translate x rotate x scale)) + jQuery Slider)
No comments:
Post a Comment