我开始使用HTML5和JS构建网格,但这不起作用?

时间:2016-03-25 17:40:25

标签: html5-canvas

显然这不起作用,因为我是HTML5的新手,我不确定为什么。我应该在画布上画一些垂直线条。我们的想法是在画布屏幕上构建一个网格,但是由于某种原因,这似乎并没有创建这些行。

<!DOCTYPE html>
<html>
<head>
<title>Test App</title>


<style>
body {
    padding:0px;
    margin:0px;

}
canvas {
    border:1px solid #000000;

}

</style>
</head>

<body>
<canvas id="gc" width="800" height="600"></canvas>

<script>
    function buildGrid() {
        alert("Start!");
        var gameCanvas = document.getElementById("gc");
        var ctx = gameCanvas.getContext("2d");

        for (x=5; x<gameCanvas.width; x+=5) {
            console.log(x);
            ctx.moveTo(x, 10);
            ctx.lineTo(x, gameCanvas.length);
        }




        ctx.strokeStyle = "black";
        ctx.stroke();


    }
    window.onload = buildGrid();
</script>

</body>
</html>

2 个答案:

答案 0 :(得分:1)

而不是

ctx.lineTo(x, gameCanvas.length);

尝试

ctx.lineTo(x, gameCanvas.height);

https://jsfiddle.net/9as7mwb6/6/

答案 1 :(得分:1)

没有#include<stdio.h> #include<math.h> int main(){ int houses[1000],k,numberofhouses; int sum=0,tmpsum=0; int i,j,d; // printf("enter number of houses\n"); scanf("%d",&numberofhouses); // printf("enter k\n"); scanf("%d",&k); // printf("enter distance\n"); for(i=0;i<numberofhouses;i++) { scanf("%d",&houses[i]); } for(i=0;i<(numberofhouses-1);i++) { for(j=i+1;j<numberofhouses;j++) { d = ( houses[i] - houses[j] ); tmpsum = pow(abs(d),k); sum = sum + 2 * tmpsum; } } printf("sum is %d",sum); return 0; } 。它应该是gameCanvas.length

但是,我认为您应该为每个x值添加gameCanvas.height,以使边缘清晰而不是模糊:

0.5