|
<html> <head> <style type="text/css"> .wraper { position: relative; border: 1px solid orange; } </style> <script type="text/javascript"> function draw(){ var can = document.getElementById('test'); if(can.getContext){ var cxt = can.getContext('2d'); cxt.beginPath(); cxt.arc(100,30,15,Math.PI,Math.PI*0.5,false); cxt.lineTo(100,65); cxt.lineTo(30,100); cxt.arc(30,115,15,Math.PI*1.5,Math.PI*0.5,true); cxt.lineTo(170,130); cxt.arc(170,115,15,Math.PI*0.5,Math.PI*1.5,true); cxt.lineTo(100,65); cxt.stroke(); cxt.closePath(); } } </script> </head> <body onload="draw();"> <canvas id="test" width="200px" height="200px" class="wraper"></canvas> </body> </html>
|