那里錯了，當(dāng)使用context.drawImage( image , 0 , 0 )可以顯示1個，但當(dāng)不用時無法顯示圖，各位大神，請指教
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title></title>
</head>
<body>
??? <canvas id="canvas" style ="divplay:block;margin:0 auto;border:1px solid #aaa;"><!--顯示畫布框架-->
??????? 當(dāng)前瀏覽器不支持Canvas，請更換瀏覽器后再試
??? </canvas>
??? <script src="digit.js"></script>
??? <script src="countdown.js"></script>
<script>
?var image = new Image()
??????????? image.src = "s7.ico"
??????????? image.onload = function(){
?????????? var pattern = context.createPattern(image ,"repeat_x");
?? ??? ?? // context.drawImage( image , 0 , 0 )
?? ??? ??? context.fillStyle = Pattern
?? ??? ??? context.fillRecf( 0 , 0 , 800 , 800 )
?? ??? ?? ?
?? ??? ?? ?
??????????? }
}?? ?
</script>
</body>
</html>
2016-12-07
我把你的代碼修改了下：
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title></title> </head> <body> ????<canvas?id="canvas"?style?="divplay:block;margin:0?auto;border:1px?solid?#aaa;"> ????????當(dāng)前瀏覽器不支持Canvas，請更換瀏覽器后再試 ????</canvas> <script> window.onload=function?(){ ??????var?canvas=document.getElementById('canvas'); ??????var?context=canvas.getContext('2d'); ???????var?image?=?new?Image() ????????????image.src?=?"s7.ico"????????//背景圖路徑 ????????????image.onload?=?function(){ ???????????var?pattern?=?context.createPattern(image?,"repeat-x"); ???????????context.fillStyle?=?pattern ???????????context.fillRect(?0?,?0?,?800?,?800?)??????????? ??????????} ??} </script> </body> </html>這下絕對沒問題了~
2016-12-07
終于可以顯示了，但不明白為何要刪去canvas.width = 800?????????
??????????? canvas.height = 800?
采納
2016-12-07
原在2個文件夾編寫，1個index.html為:
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title></title>
</head>
<body>
??? <canvas id="canvas" style ="divplay:block;margin:0 auto;border:1px solid #aaa;"><!--顯示畫布框架-->
??????? 當(dāng)前瀏覽器不支持Canvas，請更換瀏覽器后再試
??? </canvas>
??? <script src="digit.js"></script>
??? <script src="countdown.js"></script>
</body>
</html>
另1個countdown.js(末修改名稱)為window.onload = function(){
???? var canvas = document.getElementById("canvas")
??????????? canvas.width = 800?????????
??????????? canvas.height = 800??????????
??? var context = canvas.getContext("2d")?
??????
????????? var image = new Image()
??????????? image.src = "s7.ico"
????????? ?
?? ??? ??? ?image.onload = function(){
????????? ?
?? ??? ?? var pattern = context.createPattern(image ,"repeat-x");
?? ??? ?? context.drawImage( image , 0 , 0 )
?? ??? ??? context.fillStyle = pattern
?? ??? ??? context.fillRecf( 0 , 0 , 800 , 800 )?? ??? ???
??????????? }
}
現(xiàn)合并為:1個
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title></title>
</head>
<body>
??? <canvas id="canvas" style ="divplay:block;margin:0 auto;border:1px solid #aaa;"><!--顯示畫布框架-->
??????? 當(dāng)前瀏覽器不支持Canvas，請更換瀏覽器后再試
??? </canvas>
<script>
??? window.onload = function(){
???? var canvas = document.getElementById("canvas")
??????????? canvas.width = 800?????????
??????????? canvas.height = 800??????????
??? var context = canvas.getContext("2d")?
??????? var image = new Image()
??????????? image.src = "s7.ico"
????????? ?
?? ??? ??? ?image.onload = function(){
????????? ?
?? ??? ?? var pattern = context.createPattern(image ,"repeat-x");
?? ??? ?? //context.drawImage( image , 0 , 0 )
?? ??? ??? context.fillStyle = pattern
?? ??? ??? context.fillRecf( 0 , 0 , 800 , 800 )?? ??? ???
??????????? }
}
</script>
</body>
</html>
合并前與合并后都不能顯示
2016-12-07
你的代碼毛病有很多處，敲代碼要細(xì)心些吶。
repeat_x -> 改成repeat-x
context.fillStyle = Pattern ?-> 改成pattern
?context.fillRecf( 0 , 0 , 800 , 800 ) -> 改成fillRect
而且，繪圖要有上下文，基礎(chǔ)要學(xué)扎實。
? ? ? var canvas=document.getElementById('canvas');
? ? ? var context=canvas.getContext('2d');
這兩句去哪了？
第三，你為什么要引入兩個無關(guān)的JS文件？（那個不是用在倒計時效果里的么）
2016-12-07
可以用context.drawImage( image , 0 , 0 )顯示圖片，算正確吧
2016-12-07
重復(fù)性參數(shù)你寫錯了，應(yīng)該是“repeat-x”(橫向平鋪)