JavaScript 之 canvas（三）-- 使用鼠标实时绘制图形

最新推荐文章于 2024-07-27 09:49:03 发布

小鹰丶

最新推荐文章于 2024-07-27 09:49:03 发布

阅读量4k

点赞数 6

分类专栏： # canvas # JavaScript 文章标签： javascript canvas 绘图

本文链接：https://blog.csdn.net/jeremyjone/article/details/100884059

版权

本文介绍如何使用JavaScript的canvas元素结合鼠标事件实现动态绘图。通过加载图片、清空canvas、监听鼠标事件，实现鼠标移动时实时绘制和更新图像。详细步骤包括：加载图片、清空canvas、获取鼠标事件，并提供了绘图函数的实现，创建了一个简单的绘画板功能。

摘要由CSDN通过智能技术生成

原文地址： 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