我正在寻找一种方法来在画布上“生活”绘制矩形或圆圈。Javascript画布绘制矩形或圆圈
我发现用fillRect()
来绘制矩形,但没有生活的各种方式。我的意思是,能够在一点上将mouseDown()
移动到画布中的另一个点上,画布定义画布的大小,就像例如在Microsoft Paint,OneNote等中一样。
任何人都可以帮助我,并告诉我如何开始?我可能会想对如何做到这一点的方式,没有看到矩形(或圆形)的尺寸变化,是这样的:
$("canvas").mousedown(function(event){
var ctx = this.getContext("2d");
ctx.clearRect(0,0,$(this).width(),$(this).height());
var initialX = event.clientX - this.getBoundingClientRect().left;
var initialY = event.clientY - this.getBoundingClientRect().top;
$(this).mousemove(function(evt) {
ctx.strokeRect(initialX, initialY, evt.clientX - event.clientX, evt.clientY - event.clientY);
});
});
但我想现场观看,所以矩形的大小如何变化的时候,用户移动鼠标。
使用'window.requestAnimationFrame()'经常刷新画布 – frozen
@ randnum-1和?你的意思是每隔50ms重绘一次画布或像'setInterval()'中的那样,直到'mouseUp'? – nameless
我假设你想要像这样的东西https://jsfiddle.net/jk607fqn/3/在画布上单击以绘制红色方块 – slackOverflow