那里错了，当使用context.drawImage( image , 0 , 0 )可以显示1个，但当不用时无法显示图，各位大神，请指教

个回答

心有猛虎_细嗅蔷薇: 2016-12-07 15:07:43

已采纳

我把你的代码修改了下：

<!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;">
        当前浏览器不支持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>

这下绝对没问题了~

慕粉4042427

2016-12-07 15:58:50

终于可以显示了，但不明白为何要删去canvas.width = 800
canvas.height = 800
采纳

0
慕粉4042427

2016-12-07 15:41:30

原在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;">
        当前浏览器不支持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 )
            }
}
现合并为: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;">
        当前浏览器不支持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>
合并前与合并后都不能显示

0
心有猛虎_细嗅蔷薇

2016-12-07 15:04:23

你的代码毛病有很多处，敲代码要细心些呐。
repeat_x -> 改成repeat-x
context.fillStyle = Pattern -> 改成pattern
context.fillRecf( 0 , 0 , 800 , 800 ) -> 改成fillRect
而且，绘图要有上下文，基础要学扎实。
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
这两句去哪了？
第三，你为什么要引入两个无关的JS文件？（那个不是用在倒计时效果里的么）

0
慕粉4042427

2016-12-07 14:54:49

可以用context.drawImage( image , 0 , 0 )显示图片，算正确吧

0
心有猛虎_细嗅蔷薇

2016-12-07 11:08:46
```
使用背景图时，将调用createPattern函数来代替之前的drawImage函数;
```
重复性参数你写错了，应该是“repeat-x”(横向平铺)

0