我正在尝试使用脚本在画布上绘制方格纸,例如从潜水到html5。结果应该用10px的正方形绘制一个网格,但我的大小约为20px,而不是精确的正方形。
这是代码,`
<html>
<head>
<style>
body{
margin: 20px 20px 20px 20px;
}
canvas{
width: 500px;
height: 375px;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
function activate(){
var canvas =document.getElementById("exp");
var context = canvas.getContext("2d");
for (var x=0.5;x<500;x+=10){
context.moveTo(x,0);
context.lineTo(x,375);
console.log(x);
}
for (var y=0.5;y<375;y+=10){
context.moveTo(0,y);
context.lineTo(500,y);
}
context.strokeStyle="#000";
context.stroke();
}
</script>
</head>
<body>
<canvas id="exp"><script type="text/javascript">activate();</script></canvas>
</body
</html>
这是输出:
实际输出应为:
注意:我不担心色差。我不明白的是为什么2行之间的空间是〜20px(由firefox上的测量工具检查)而不是10px。
另外,在打印x的值时,它给出正确的值(即每次增加10)。
答案 0 :(得分:2)
你不能用css设置画布的大小 你应该在DOM的属性中设置。
<canvas width="100" height="200"></canvas>
答案 1 :(得分:0)
Javascript可以为您计算。仅设置参数:
HTML:
<canvas id="exp"></canvas>
JS:
function activate(id, xcount, ycount, width, color) {
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
canvas.width = xcount * width + 1;
canvas.height = ycount * width + 1;
for (var x = 0.5; x < canvas.width; x += width) {
context.moveTo(x, 0);
context.lineTo(x, canvas.height);
}
for (var y = 0.5; y < canvas.height; y += width) {
context.moveTo(0, y);
context.lineTo(canvas.width, y);
}
context.strokeStyle = color;
context.stroke();
}
activate("exp", 37, 50, 10, "#ccc");
另见this example。