<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta name='description' content='this is my page'> <meta name='keywords' content='keyword1,keyword2,keyword3'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel='stylesheet' type='text/css' href='./css/index.css' /> <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script> <style type='text/css'> html,body { margin: 0; padding: 0; } html { background: #999; height: 100%; } #can { background: #FFF; display: block; margin: 75px auto; border-radius: 2px; } </style> <script type='text/javascript'> $( function(){ var oCan = $( '#can' ).get( 0 ).getContext( '2d' ); oCan.beginPath(); /* translate rotate 这两个属性要设置在moveTo lineTo 之前,否则无效 */ oCan.translate(125,50); /* 改变画布的中心 */ oCan.rotate(15*Math.PI/180); /* 旋转是围绕画布的中心点进行的, */ oCan.moveTo( 30 , 120 ); oCan.lineTo( 120 , 30 ); oCan.lineWidth = 1; oCan.strokeStyle = '#F00'; oCan.stroke(); oCan.closePath(); } ); function getId( id ){ return document.getElementById( id ); } </script> </head> <body> <canvas id='can' width='500' height='500'>您的浏览器版本过低,请您更换浏览器以获取更好的用户体验...</canvas> </body> </html>