<!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 canvas = $( '#can' ).get( 0 ); var oCan = canvas.getContext( '2d' ); var img = new Image(); /* 新建图片对象 */ img.src = './images/bg.jpg'; img.onload = createBg; /* 图片预加载技术 */ function createBg(){ var bg = oCan.createPattern( img , 'repeat' ); /* 图片的平铺方式 repeat repeat-x repeat-y no-repeat */ oCan.fillStyle = bg; /* 请注意 : fillStyle 填充样式这个属性不仅可以设置颜色还可以设置背景图片 */ oCan.fillRect( 250-99 , 250-127 , canvas.width , canvas.height ); } } ); </script> </head> <body> <canvas id='can' width='500' height='500'>您的浏览器版本过低,请升级您的浏览器以获取更好的用户体验...</canvas> </body> </html>