原文地址: https://www.jeremyjone.com/472/ ,转载请注明
在JavaScript 之 canvas(一)中理解了canvas的绘图原理。
在JavaScript 之 canvas(二)中掌握了基本图形的函数,但是这些图形绘好之后是不会改变的。这并不符合我要做的这个绘图工具的最基本功能。
那么这篇文章来实现利用鼠标位置实时绘图。
首先我们需要了解动态绘图的思路,canvas
在同一时刻,只能显示一张图片,也就是说,canvas
是静态的,要实现实时绘图,就要不停切换canvas
显示的图片内容,从而达到我们要的效果。
如图效果,让图片按照我们的鼠标移动而改变大小,这样就需要刷新canvas
,现在就来实现这个效果。
第一步,加载图片和清空canvas
canvas.loadImage = function () {
let self = this;
let img = new Image();
img.src = self.lastImage; // 将最后保存的图片赋值给img
context.drawImage(img, 0, 0, canvas.width, canvas.height); // 将img展示在canvas中
}
canvas.initCanvas = function () {
context.clearRect(0, 0, canvas.width, canvas.height); // 清空canvas
canvas.loa