<!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; } canvas { 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(); oCan.stokeStyle = ‘#F00‘; oCan.translate( 250 , 250 ); /* 将后绘制出的图形进行平移 */ for( var i = 0 ; i < 50 ; i++ ){ oCan.rotate( 35 * Math.PI / 180 ); /* 将后绘制出的图形进行旋转 */ oCan.scale( 0.9 , 0.7 ); /* 将后绘制出的图形进行缩放 */ oCan.fillRect( 200 , 150 , 50 , 30 ); /* 实现旋转复制效果 */ oCan.closePath(); } } ); </script> </head> <body> <canvas id=‘can‘ width=‘500‘ height=‘500‘>您的浏览器版本过低,请升级您的浏览器,以获取更好的用户体验...</canvas> </body> </html>
时间: 2024-08-07 19:16:36