代码之家 › 专栏 › 技术社区 › aMJay

在画布上生成线条无法按预期工作

canvas html javascript

0

aMJay · 技术社区 · 8 年前

我创建了一个简单的脚本,它将在画布上生成一行。我想要达到的是让它从画布的中间开始,在画布的一个随机点结束。

下面是一个演示:

const c = document.getElementById("canvas");
let ctx = c.getContext("2d");

var _x = window.getComputedStyle(c).width;
var _y = window.getComputedStyle(c).height;

//Get canvas size
var x = (c.width = Number(_x.substring(0, _x.length - 2)));
var y = (c.height = Number(_y.substring(0, _y.length - 2)));

//Turn variables from string to int

function getRandomPoint(x, y) {
  //Generate random point within the canvas
  var px = Math.floor(Math.random() * x);
  var py = Math.floor(Math.random() * y);
  var cord = [px, py];
  return cord;
}

var cord = getRandomPoint(x, y);
createLine(x, y, cord[0], cord[1]);

function createLine(x, y, xk, yk) {
  ctx.beginPath();
  ctx.moveTo(x / 2, y / 2);
  ctx.lineTo(xk, yk);
  ctx.stroke();
}

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body, html{
    width:100%;
    height:100%;
}

body{
    background-color:#f2f2f2;
}



/* CANVAS */

canvas{
    height:400px;
    width:600px;
    margin: 20px auto;
    background-color:white;
    display: block;
    border: 1px solid #999;
}

<canvas id="canvas"></canvas>

我不知道为什么会这样,这是我第一次尝试画布,所以可能我错过了一些明显的东西。

3 回复 | 直到 8 年前

1

stanosky 8 年前

您忘记在html属性中输入画布的宽度和高度:

const c = document.getElementById('canvas');
let ctx = c.getContext('2d');

//Get canvas size
var x = window.getComputedStyle(c).width;
var y = window.getComputedStyle(c).height;
//Turn variables from string to int
x = Number(x.substring(0,x.length-2));
y = Number(y.substring(0,y.length-2));

function getRandomPoint(x,y){
    //Generate random point within the canvas
    px = Math.floor(Math.random()*x);
    py = Math.floor(Math.random()*y);
    cord = [px, py];
    return cord;
}

var cord = getRandomPoint(x,y);
createLine(x,y,cord[0],cord[1]);

function createLine(x,y,xk,yk){
    ctx.moveTo(x/2,y/2);
    ctx.lineTo(xk,yk);
    ctx.stroke();
}

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body, html{
    width:100%;
    height:100%;
}

body{
    background-color:#f2f2f2;
}



/* CANVAS */

canvas{
    height:400px;
    width:600px;
    margin: 20px auto;
    background-color:white;
    display: block;
    border: 1px solid #999;
}

<canvas id="canvas" width="600" height="400"></canvas>

2

1

enxaneta 8 年前

您需要声明画布宽度;javascript中的高度。

const c = document.getElementById("canvas");
let ctx = c.getContext("2d");

var _x = window.getComputedStyle(c).width;
var _y = window.getComputedStyle(c).height;

//Get canvas size
//Turn variables from string to int
var x = (c.width = Number(_x.substring(0, _x.length - 2)));
var y = (c.height = Number(_y.substring(0, _y.length - 2)));



function getRandomPoint(x, y) {
  //Generate random point within the canvas
  var px = Math.floor(Math.random() * x);
  var py = Math.floor(Math.random() * y);
  var cord = [px, py];
  return cord;
}

var cord = getRandomPoint(x, y);
createLine(x, y, cord[0], cord[1]);

function createLine(x, y, xk, yk) {
  ctx.beginPath();
  ctx.moveTo(x / 2, y / 2);
  ctx.lineTo(xk, yk);
  ctx.stroke();
}

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body, html{
    width:100%;
    height:100%;
}

body{
    background-color:#f2f2f2;
}



/* CANVAS */

canvas{
    height:400px;
    width:600px;
    margin: 20px auto;
    background-color:white;
    display: block;
    border: 1px solid #999;
}

<canvas id="canvas"></canvas>

3

0

Tyler Zeller 8 年前

你几乎做到了,你只是忘记了添加宽度和高度到你的画布HTML节点

<canvas id="canvas" height=400 width=600></canvas>