Java在画布里画点_在HTML5画布上画一个点[重复]

这看起来很奇怪,但HTML5支持绘制线条,圆形,矩形和许多其他基本形状,它没有任何适合绘制基本点的东西 . 唯一的方法是用你拥有的任何东西来模拟一个点 .

所以基本上有3种可能的解决方案:

绘制点作为一条线

绘制点作为多边形

画圆点

他们每个人都有自己的缺点 .

Line

function point(x, y, canvas){

canvas.beginPath();

canvas.moveTo(x, y);

canvas.lineTo(x+1, y+1);

canvas.stroke();

}

请记住,我们正在向东南方向前进,如果这是边缘,则可能存在问题 . 但你也可以在任何其他方向画画 .

Rectangle

function point(x, y, canvas){

canvas.strokeRect(x,y,1,1);

}

或者以更快的方式使用fillRect,因为渲染引擎只会填充一个像素 .

function point(x, y, canvas){

canvas.fillRect(x,y,1,1);

}

Circle

圆圈的一个问题是引擎更难渲染它们

function point(x, y, canvas){

canvas.beginPath();

canvas.arc(x, y, 1, 0, 2 * Math.PI, true);

canvas.stroke();

}

你可以用填充实现与矩形相同的想法 .

function point(x, y, canvas){

canvas.beginPath();

canvas.arc(x, y, 1, 0, 2 * Math.PI, true);

canvas.fill();

}

Problems with all these solutions:

很难跟踪你要绘制的所有点 .

当你放大时,它看起来很难看

如果你想知道什么是 the best way to draw a point ,我会选择填充矩形 . 你可以看到我jsperf here with comparison tests

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值