標籤：
<!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>
[ html drawImage createPattern ] canvas繪製圖片 drawImage 屬性圖片平鋪方式執行個體示範
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
