                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas绘图详解

那里错了，当使用context.drawImage( image , 0 , 0 )可以显示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 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>

慕粉4042427

2016-12-06

源自：Canvas绘图详解 5-3

关注问题我要回答

3650

操作

收起

6 回答

心有猛虎_细嗅蔷薇回答被采纳 +3 积分
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;">
        当前浏览器不支持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>

这下绝对没问题了~

0 回复有任何疑惑可以回复我~

收起回答

慕粉4042427 提问者
2016-12-07

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

0 回复有任何疑惑可以回复我~

收起回答

慕粉4042427 提问者
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;">
        当前浏览器不支持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

你的代码毛病有很多处，敲代码要细心些呐。

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

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

0 回复有任何疑惑可以回复我~

收起回答

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

使用背景图时，将调用createPattern函数来代替之前的drawImage函数;

重复性参数你写错了，应该是“repeat-x”(横向平铺)

0 回复有任何疑惑可以回复我~

收起回答

慕粉4042427 提问者

修正了repeat-x，取消// context.drawImage( image , 0 , 0 )但仍然不显示

2016-12-07 回复有任何疑惑可以回复我~

心有猛虎_细嗅蔷薇回复慕粉4042427 提问者

照片的路径引用正确了吗？

2016-12-07 回复有任何疑惑可以回复我~

0/150

提交

取消

Canvas绘图详解

参与学习 72881 人
解答问题 422 个

Canvas系列教程第二课,详解Canvas各接口，让同学彻底掌握Canvas绘图

进入课程

本课相似问答

2 回答按老师照抄，为何不显示，各位大神帮看一看

3 回答大神，求指教，我的代码没有错误，为什么显示不了效果

2 回答图像不显示，没有显示什么错误

4 回答globalCompositeOperation那个示例的有些fillText不显示

1 回答不显示，请帮看看错在哪里？

搜索更多本课相关问答

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

我要回答关注问题

热搜

最近搜索清空

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

6 回答

本课相似问答

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