那里错了，当使用context.drawImage( image , 0 , 0 )可以显示1个，但当不用时无法显示图，各位大神，请指教
慕粉4042427
2016-12-06 16:40
<!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>
6回答
-
- 心有猛虎_细嗅蔷薇
- 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
采纳 -
- 慕粉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>合并前与合并后都不能显示
-
- 心有猛虎_细嗅蔷薇
- 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文件？（那个不是用在倒计时效果里的么）
-
- 慕粉4042427
- 2016-12-07 14:54:49
可以用context.drawImage( image , 0 , 0 )显示图片，算正确吧
-
- 心有猛虎_细嗅蔷薇
- 2016-12-07 11:08:46
使用背景图时，将调用createPattern函数来代替之前的drawImage函数;
重复性参数你写错了，应该是“repeat-x”(横向平铺)
Canvas绘图详解
72881 学习 · 422 问题
相似问题