javascript - more than one canvases to be placed horizontally -
i want place 2 canvases horizontaly such first canvas takes 60% width , other takes remaining 40%.
so procedure using javascript , css???
ps: code should work cross platform.
you have write script calculates browser width , change width attribute of canvas setting width = width*4/10 , width*6/10 respectively.the following code demonstrate how that.
<!doctype html> <html> <head> <title>canvas horizontal</title> <style> canvas{ float:left; border:1px solid black; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ var width=$( window ).width(); $("#one").attr("width",width*4/10-20); $("#two").attr("width",width*6/10-20); var height=$(window).height(); $("#one").attr("height",height*3/4); $("#two").attr("height",height*3/4); }); </script> </head> <body> <div> <canvas id="one" height="500" width="500"></canvas> <canvas id="two" height="500" width="500"></canvas> </div> </body> </html>
Comments
Post a Comment