HTML5 画布线条未绘制
HTML5 Canvas lines not drawing
正如问题所暗示的那样,我试图在HTML5画布上画一条线。我已经测试了这些值,发现它将绘制一条从 0,0 到 1920,1040(客户区域大小)的线,但不会为输入的任何其他值绘制一条线。我很确定这将是一个简单的错误,但我还没有发现它,真的需要继续前进。感谢您的帮助!
代码如下:
function DrawGrid() {
var canvas = document.getElementById("Grid");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(872, 432);
context.lineTo(1048, 432);
context.strokeStyle = "#FF0000";
context.lineWidth = 1;
context.stroke();
context.closePath();
}
您的LineStartX
和LineStartY
变量一定有问题(无法测试,因为您没有提供CenterX
和CenterY
),用硬编码整数替换它们似乎有效。
DrawGrid();
function DrawGrid() {
var canvas = document.getElementById("Grid");
var context = canvas.getContext("2d");
//var LineStartX = CenterX - (width / 2);
// var LineStartY = CenterY - (height / 2);
context.beginPath();
context.moveTo(10, 20);
context.lineTo(100, 20);
context.strokeStyle = "#FFAACC";
context.lineWidth = 1;
context.stroke();
}
http://jsfiddle.net/4Mf8C/
我发现问题是由我调用函数的位置引起的。
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 有没有一个javascript图形绘制库可以进行气球树布局
- 在Angular 2中布线期间保持零部件处于活动状态
- 使用相同的数据集绘制各种符号
- 使用onclick绘制SVG路径
- 在谷歌地图上绘制位置数据库
- 用chart.js绘制条形图
- “可绘制地图”设置地图选项“纬度-经度”
- 多维数据集网格未在指定的分区中绘制
- 使用谷歌图表在x轴上绘制日期
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- 如何在React Native中绘制图形
- 画布中绘制的矩形区域的弹出工具提示
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 画布:逐像素绘制图像并请求动画帧计时
- D3从嵌套的JSON中绘制第二个圆环图
- 如何用d3.js绘制折线图
- 在WebGL中绘制多个二维图像
- 从另一个函数绘制时,画布线不保留
- 如何绘制HTML5画布线给定用户输入的X,Y点