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

求大神看看代码哪里错了一直画不出线条

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="canvas-warp" style="border:1px solid #aaaaaa;display:block;margin:50px auto;">
</canvas>
</div>
<script>

window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=800;
canvas.height=800;
var context=canvas.getContext("2d");
context.moveTo(100,100);
context.lineTo(300,300);
context.lineWidth=5;
context.strokeStyle="#AA394C";
context.stroke();
}

</script>

</body>
</html>

嗜甜怪

2016-11-15

源自：Canvas绘图详解 2-1

关注问题我要回答

913

操作

收起

2 回答

草莓summer 回答被采纳 +3 积分
2016-11-18

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

//你的错误在于canvas标签，canvas不是一个div，它是html5的一个特定的标签，不能用<div id="canvas">这样来创建一个canvas

<canvas id="canvas" style="border:1px solid #aaaaaa;display:block;margin:50px auto;">
</canvas>

<script>

window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=800;
canvas.height=800;
var context=canvas.getContext("2d");
context.moveTo(100,100);
context.lineTo(300,300);
context.lineWidth=5;
context.strokeStyle="#AA394C";
context.stroke();
}

</script>

</body>
</html>

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

#1

嗜甜怪提问者

太感谢你辣！！

2016-11-22 回复有任何疑惑可以回复我~

草莓summer
2016-11-16

<canvas id="canvas" style="border:1px solid #aaaaaa;display:block;margin:50px auto;">
</canvas>
你的id错了下面的js找不到id=canvas，所以画不出来

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

#1

嗜甜怪提问者

那要怎么改呀

2016-11-17 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

Canvas绘图详解

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

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

本课相似问答

8 回答各位大神，谁可以帮帮小妹看看这段代码哪出错了，十分感谢！

4 回答大神，在哪里？帮帮我，看哪出了问题？十分感谢

1 回答帮忙看下这个代码哪里错了。。。

3 回答最后一个demo，发现画图一闪而过，然后页面就空白了，什么鬼？代码哪里写错了嘛？求看

1 回答求大神出不来效果

搜索更多本课相关问答

求大神看看代码哪里错了一直画不出线条

我要回答关注问题

意见反馈帮助中心 APP下载