標籤：
1 <!DOCTYPE html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Insert you title</title> 5 <meta name=‘description‘ content=‘this is my page‘> 6 <meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 8 <link rel=‘stylesheet‘ type=‘text/css‘ href=‘./css/index.css‘ /> 9 <script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script>10 <style type=‘text/css‘>11 html,body {12 margin: 0; padding: 0;13 }14 15 html {16 height: 100%;17 }18 19 body {20 background: #000;21 }22 23 #can {24 display: block; border-radius: 2px; margin: 25px auto; background: #FFF;25 }26 </style>27 <script type=‘text/javascript‘>28 $( function(){29 var oCan = $( ‘#can‘ ).get( 0 ).getContext( ‘2d‘ );30 var oImg = new Image();31 oImg.src = ‘./images/index.jpg‘;32 oImg.onload = function(){33 var cp = oCan.createPattern( oImg , ‘repeat‘ ); /* 建立背景平鋪方式 */34 oCan.fillStyle = cp;35 oCan.fillRect( 0 , 0 , 500 , 450 );36 };37 } );38 </script>39 </head>40 <body>41 <canvas id=‘can‘ width=‘500‘ height=‘450‘>您的瀏覽器版本過低,請升級您的瀏覽器以擷取更好的使用體驗...</canvas>42 </body>43 </html>
[ html createPattern 繪製背景平鋪方式 ] canvas繪製圖片 createPattern 繪製背景平鋪方式 屬性執行個體
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
