html5网页偏,canvas 绘图时位置偏离的问题解决

使用 canvas 绘图时，指定的 div 大小一定不要超过该 div 所能获得的最大范围，否则绘制的点会跟实际位置发生偏离。

例如

untitled 1

.style1 {

font-size: x-small;

}

var paint = false;

var start = false;

var canvas = document.getelementbyid("container");

canvas.width = 800;

canvas.height = 800;

var offsety = canvas.offsettop;

var offsetx = canvas.offsetleft;

var y;

var x;

var context = canvas.getcontext("2d");

function mousemove(e) {

if (paint == true){

if (start == false){

context.moveto(0, 0);

start = true;

} else {

context.moveto(x, y);

}

x = e.pagex - offsetx;

y = e.pagey - offsety;

context.lineto(x, y);

context.stroke();

}

}

function mousedown(event) {

paint = true;

console.log("down")

}

function mouseup(event) {

paint = false;

console.log("up")

}

上例中可以正确的绘制线图。

如果更改为：

由于 canvas 所需 width 800px 无法满足，因此绘制线图时，与实际鼠标位置发生偏离。

到此这篇关于canvas 绘图时位置偏离的问题解决的文章就介绍到这了,更多相关canvas 绘图位置偏离内容请搜索萬仟网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持萬仟网！