39,084
社区成员
发帖
与我相关
我的任务
分享刚学HTML5出现这种问题该怎么解决
第一段代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas画布</title>
<script type="text/javascript">
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
canvas{
width: 500px;
height: 500px;
border: black solid 1px;
}
</style>
</head>
<body>
<canvas id="myCanvas1"></canvas>
<script>
var c = document.getElementById("myCanvas1");
var ct = c.getContext("2d");
ct.fillStyle = "#000000";
ct.fillRect(20, 20, 20, 20);
</script>
</body>
</html>
第一个截图
第二段代码
<body>
<canvas id="myCanvas1" width="500px" height="500px" style="border: black solid 1px;"></canvas>
<script>
var c = document.getElementById("myCanvas1");
var ct = c.getContext("2d");
ct.fillStyle = "#000000";
//ct.fillText("我的第一个2D画布")
ct.fillRect(20, 20, 20, 20);
</script>
</body>
第二段截图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas画布</title>
<script type="text/javascript">
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
canvas{
width: 500px;
height: 500px;
border: black solid 1px;
}
</style>
</head>
<body>
<canvas id="myCanvas1"></canvas>
<script>
var c = document.getElementById("myCanvas1");
var ct = c.getContext("2d");
ct.fillStyle = "#000000";
ct.fillRect(20, 20, 20, 20);
</script>
</body>
</html>
第一个截图
第二段代码
<body>
<canvas id="myCanvas1" width="500px" height="500px" style="border: black solid 1px;"></canvas>
<script>
var c = document.getElementById("myCanvas1");
var ct = c.getContext("2d");
ct.fillStyle = "#000000";
//ct.fillText("我的第一个2D画布")
ct.fillRect(20, 20, 20, 20);
</script>
</body>
第二段截图
...全文
请发表友善的回复…
发表回复
MeteorOC 2017-12-13
- 打赏
- 举报
1楼正解，还没有结贴么。~
Patient- 2017-12-06
- 打赏
- 举报
1楼正解..
蕤sunny 2017-11-22
- 打赏
- 举报
一楼说的很有道理，canvas画布默认得大小是300*150，这个canvas的大小可以在JavaScript或者canvas标签中设置，不用加px单位，设置的同时，像素也会被一同设置，但是不可以在css中指定，因为css中指定的大小是指可视区的大小，按照你上面写的第一个，最后结果就是把一个300*150的画布拉伸成500*500的进行显示，所以正方形被拉成了长方形
moyu3 2017-11-20
- 打赏
- 举报
不能用CSS 样式设置，只能在属性里设
wzx3313185 2017-11-20
- 打赏
- 举报
上面说的不错
天际的海浪 2017-11-19
- 打赏
- 举报
更正：画布内像素默认的是300*150
天际的海浪 2017-11-19
- 打赏
- 举报
canvas元素的直接属性width和height是设置画布内的像素多少。
而用css属性width和height设置的只是canvas元素在页面上呈现的大小。不会改变画布内的像素多少，画布内像素默认的是150*100
只用css设置就等于将一张150*100像素的小图片放大到500*500来显示。
