首页 / CANVAS / canvas实现按住鼠标移动绘制出轨迹的方法实例

canvas实现按住鼠标移动绘制出轨迹的方法实例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了canvas实现按住鼠标移动绘制出轨迹的方法实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4797字，纯文字阅读大概需要7分钟。

内容图文

需求

在一块canvas画布上，初始状态画布什么都没有，现在，我想给画布加一点鼠标事件，用鼠标在画布上写字。具体的效果是鼠标移动到画布上任意一点，然后按住鼠标，移动鼠标的位置，就可以开始写字啦！

本文作为学习canvas的第一篇收获，很多人初学canvas做的第一个demo是实现一个“钟”，当然，我也实现了一个，不过不讲这个，而是讲讲一个更有趣、也更简单的玩意。

鼠标按住绘制轨迹

canvas实现按住鼠标移动绘制出轨迹的方法实例 - 文章图片

原理

先简单分析下思路，首先我们需要一个canvas画布，然后计算鼠标在画布上的位置，给鼠标绑定onmousedown事件和onmousemove事件，在移动过程中绘制出路径，松开鼠标的时候，绘制结束。

这个思路虽然很简单，但是里面有些地方需要小技巧实现。

1、需要一个html文件，包含canvas元素。

这是一个宽度800，高度400的画布。为什么没有写px呢？哦，暂时没搞懂，canvas文档推荐的。

<!doctype html>
<html class="no-js" lang="zh">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>canvas学习</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="manifest" href="site.webmanifest">
        <link rel="apple-touch-icon" href="icon.png">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <canvas id="theCanvas" width="800" height="400"></canvas>
        <script src="js/main.js"></script>
    </body>
</html>

2、判断当前环境是否支持canvas。

在main.js中，我们写一个自执行函数，下面是兼容性判断的代码片段，“代码主体”中将会是实现需求的核心。

(function() {
    let theCanvas = document.querySelector('#theCanvas')
    if (!theCanvas || !theCanvas.getContext) {
        //不兼容canvas
        return false
    } else {
        //代码主体
    }
})()

3、获取2d对象。

   let context = theCanvas.getContext('2d')

4、获取当前鼠标相对于canvas的坐标。

为什么要获取这个坐标呢？因为鼠标默认是获取当前窗口的相对坐标，而canvas可以位于页面上的任何位置，所以需要通过计算才能得到真实的鼠标坐标。

将获取鼠标相对于canvas的真实坐标封装成了一个函数，如果你觉得抽象，可以在草稿纸上画图来理解为什么要这么运算。

通常情况下，可以是x - rect.left和y - rect.top。但为什么实际上却是x - rect.left * (canvas.width/rect.width)呢？

canvas.width/rect.width表示判断canvas中存在的缩放行为，求出缩放的倍数。

const windowToCanvas = (canvas, x, y) => {
    //获取canvas元素距离窗口的一些属性，MDN上有解释
    let rect = canvas.getBoundingClientRect()
    //x和y参数分别传入的是鼠标距离窗口的坐标，然后减去canvas距离窗口左边和顶部的距离。
    return {
        x: x - rect.left * (canvas.width/rect.width),
        y: y - rect.top * (canvas.height/rect.height)
    }
}

5、有了第4步的利器函数，我们可以给canvas加上鼠标事件了！

先给鼠标绑定按下onmousedown事件，用moveTo绘制坐标起点。

theCanvas.onmousedown = function(e) {
    //获得鼠标按下的点相对canvas的坐标。
    let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
    //es6的解构赋值
    let { x, y } = ele
    //绘制起点。
    context.moveTo(x, y)
}

6、移动鼠标的时候，没有鼠标长按事件，又该怎么监听呢？

这里用到的小技巧是在onmousedown内部再执行一个onmousemove（鼠标移动）事件，这样就能监听按住鼠标并且移动了。

theCanvas.onmousedown = function(e) {
    //获得鼠标按下的点相对canvas的坐标。
    let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
    //es6的解构赋值
    let { x, y } = ele
    //绘制起点。
    context.moveTo(x, y)
    //鼠标移动事件
    theCanvas.onmousemove = (e) => {
        //移动时获取新的坐标位置，用lineTo记录当前的坐标，然后stroke绘制上一个点到当前点的路径
        let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
        let { x, y } = ele
        context.lineTo(x, y)
        context.stroke()
    }
}

7、鼠标松开的时候，不再绘制路径。

有什么办法可以让onmouseup事件中阻止掉上面监听的2种事件呢？方法挺多的，设置onmousedown和onmousemove为null算是一种，我这里用到了“开关”。isAllowDrawLine设置为bool值，来控制函数是否执行，具体代码可以看下面完整的源码。

源码

分为3个文件，index.html、main.js、utils.js，这里用到了es6的语法，我是使用parcle配置好了开发环境，所以不会有报错，如果你直接，运行的时候出现错误，在无法升级浏览器的情况下，可以将es6语法改成es5.

1、index.html
上面已经展示了，不再复述。

2、main.js

import { windowToCanvas } from './utils'
(function() {
    let theCanvas = document.querySelector('#theCanvas')
    if (!theCanvas || !theCanvas.getContext) {
        return false
    } else {
        let context = theCanvas.getContext('2d')
        let isAllowDrawLine = false
        theCanvas.onmousedown = function(e) {
            isAllowDrawLine = true
            let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
            let { x, y } = ele
            context.moveTo(x, y)
            theCanvas.onmousemove = (e) => {
                if (isAllowDrawLine) {
                    let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
                    let { x, y } = ele
                    context.lineTo(x, y)
                    context.stroke()
                }
            }
        }
        theCanvas.onmouseup = function() {
            isAllowDrawLine = false
        }
    }
})()

3、utils.js

/*
* 获取鼠标在canvas上的坐标
* */
const windowToCanvas = (canvas, x, y) => {
    let rect = canvas.getBoundingClientRect()
    return {
        x: x - rect.left * (canvas.width/rect.width),
        y: y - rect.top * (canvas.height/rect.height)
    }
}

export {
    windowToCanvas
}

内容总结

以上是互联网集市为您收集整理的canvas实现按住鼠标移动绘制出轨迹的方法实例全部内容，希望文章能够帮你解决canvas实现按住鼠标移动绘制出轨迹的方法实例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/412582.html

来源：【匿名】

【上一篇】canvas的视频遮罩插件实例分享【下一篇】基于canvasJS在PHP中制作动态图表详解

更多 ►

【canvas实现按住鼠标移动绘制出轨迹的方法实例】教程文章相关的互联网学习教程文章

Delphi绘图相关对象（TCanvas对象的方法）

TCanvas对象的方法方法说明ArcArc(x1,y1,x2,y2,x3,y3,x4,y4 : Integer);Arc方法在椭圆上画一段弧，椭圆由(x1,y1)、(x2,y2) 两点所确定的椭圆决定。弧的起点是椭圆圆周和椭圆中心与(x3,y3)连线的交点。弧矩形终点是椭圆圆周和椭圆中心与(x4,y4)连线的交点以逆时针方向画弧ChordChord(x1,y1,x2,yx,x3,y3,x4,y4 : Integer);Chord方法连接椭圆上两点，椭圆由(x1,y1)、(x2,y3) 两点所确定的矩形决定，(x3,y3)是始点，(x4,y4)是终点Brus...

html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法【图】

继续讲canvas中画曲线的方法，今天讲quadraticCurveTo。说实话这个方法有点吓人，单从函数名称上都可以初体验。话说，我觉得有必要把这个函数名缩短。 quadratic的意思是二次，即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下：复制代码代码如下:ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标，而x1,y1是曲线控制点的坐标？什么？你问我起点在哪里？起点在此之前用moveTo确定。我之所以把控制点的坐标带...

html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法【图】

前面的文章我已经讲了3种在canvas中画曲线的方法：arc,arcTo以及quadraticCurveTo.他们都有一个共同点，就是他们画的曲线都只能偏向一边，今天讲的bezierCurveTo与他们最大的不同点就是有两个控制点，即可以画出S形的曲线了。 bezierCurveTo，也就是所谓的贝赛尔曲线了，如果你学过某些画图工具，就能马上理解。 bezierCurveTo的语法如下： ctx.bezierCurveTo(x1,y1,x2,y2,x,y);他的参数我照例解释一下，其中的（x1,y1）即控制点1的...

安卓中Paint类和Canvas类的方法汇总

Paint类的常用的方法1.setColor方法，用于设置画笔的颜色，public void setColor(int color)//参数color为颜色值，也可以使用Color类定义的颜色Color.BLACK:黑色Color.BLUE:蓝色Color.CYAN:青绿色Color.DKGRAY:灰黑色Color.YELLOW:黄色Color.GRAY:灰色Color.GREEN:绿色Color.LTGRAY:浅绿色Color.MAGENTA:红紫色Color.TRANSPARENT:透明色2.setAlpha方法，用于设置画笔的透明度public void setAlpha(int a )//参数a为透明度，其取值范...

canvas和paint常用方法【代码】【图】

效果图：页面代码：@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);mPaint = new Paint();mPaint.setColor(Color.BLACK);//设置画笔颜色mPaint.setTextSize(14);//设置字体大小canvas.drawText(actionStr, 100, 100, mPaint);//写字mPaint.setStrokeWidth(10);//设置线条宽度mPaint.setStyle(Paint.Style.STROKE);//设置空心canvas.drawCircle(200, 250, 80, mPaint);//画圆mPaint.setAntiAlias(true);//消...

html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法【图】

一般绘图的方式有两种，即填充和描边，前面的文章已经讲了描边的方法stroke，本文就讲一下Canvas中填充图形的方法。填充即fill(),很直白吧？而且和strokeStyle表示描边样式一样，fillStyle即表示填充样式。 ctx.fillStyle = ‘颜色‘;默认的填充样式是不透明的黑色提问：未闭合的路径可以填充吗？可以。Canvas会从你当前路径的终点直接连接到起点，然后填充。如图：但你可以发现，最后一段没有描边。记得我们前一篇文章用4条线...

canvas导出图片方法总结

html代码<canvas id="canvas" width="100" height="100" ></canvas>js 代码var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");ctx.fileStyle="gray";ctx.fillReact(0,0,100,100);1.直接调用canvas对象的toDataURL方法转化为指定类型var newImg = new Image();newImg.src=canvas.toDataURL("image/png"));2.利用canvas对象的toBlob方法先通过toBlob将canvas对象转化为二进制对象，通过参数形式传入函数...

HTML5 Canvas中绘制椭圆的4种方法

概述HTML5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。各方法的参数相同：1.context为Canvas的2D绘图环境对象，2.x为椭圆中心横坐标，3.y为椭圆中心纵坐标，4.a为椭圆横半轴长，5.b为椭圆纵半轴长。参数方程法该方法利用椭圆的参数方程来绘制椭圆复制代码代码如下://-----------用参数方程绘制椭圆---------------------//函数的参数x,y为椭圆中心；a,b分别为椭圆横半轴、...

canvas的measureText()方法【代码】

做一个小动画的时候遇到了个问题，就是在给文字应用渐变色的时候，不知怎么设置渐变色的区域。渐变依赖于定义时的区域，超出这个区域只有纯色，而不是渐变色。所以要取得文字的宽度。查了资料得知，canvas有一个measureText()方法，它会返回一个TextMetrics对象，该对象只有一个width属性。只需要把文本传入measureText()即可：var texts = ‘texts‘, metrics = ctx.measureText(texts), textsWidth = metrics.width, gradient =...

PHP实现将HTML5中Canvas图像保存到服务器的方法

本文实例讲述了PHP实现将HTML5中Canvas图像保存到服务器的方法。分享给大家供大家参考。具体实现方法如下：一、问题：在几年前HTML5还没有流行的时候，我们的项目经理曾经向我提出这样一个需求：让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名。这需要我们评审软件里提供这样一个功能：打开浏览器，登录，进入评审意见页，页面最下部有个方块区域，用户在这里用触摸笔进行签名，然后这个签名将会保持的服务器上。这样的...

html5 canvas fillRect坐标和大小的问题解决方法

fillRect(100,100,100,100) 前2个100是指坐标，后2个100是指宽和高。今天学习html5 的canvas，发现fillRect的坐标和大小一直不对，研究了半天，发现canvas的宽度和高度必须内联在canvas标签中才对。郁闷了半天。错误的方式1: 复制代码代码如下:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #mycanvas{ width: 200px; height: 200px; background: yellow; } </style> </head...

TCanvas 类属性及方法

delphi TCanvas类类关系 TObject-> TPersistent 对那些作图对象，可使用TCanvas对象作为画布。标准的window控件，例如编辑控件和列表框控件，当它们被Windows画出来时，并不需要一块画布。在创建一幅图像时，TCanvas对象提供有用的属性、方法和事件，主要通过以下方法：指定需要使用的刷子、画笔和字体类型。对各类形状和线条进行作图和填充。输入文体。对图像进行着色。对当前图像的变化能作出反应。 TCanva...

Canvas开篇之drawBitmap方法讲解【图】

尊重原创，欢迎转载，转载请注明： FROM GA_studio http://blog.csdn.net/tianjian4592 前面讲了paint，后面会花几篇主要讲讲canvas，并且由于最近项目比较紧，所以近期的文章都会“短小精悍”；paint 作为画笔，里面有非常多而强大的设置方法，比如设置颜色过滤器，设置位图渲染、渐变，设置图像的混合模式等等，而canvas呢？里面提供了哪些利器可以为我们所用，一起来看看：通过上图我们可以看到，canvas 里的方法基本...

HTML5 canvas绘图基本使用方法【代码】【图】

<canvas></canvas>是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。<canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在<canvas>>元素上绘图主要有三步：获取<canvas>元素对应的DOM对象，这是一个Canvas对象；调用Canvas对象的getContext...

使用canvas元素-art方法绘制圆弧【图】

最近在学习HTML5，发现canvas真的很棒，canvas元素是一种可供绘图的平面，我们用JavaScript对它进行配置和操作。我这里说一下arc方法绘制圆弧，顺便提一下涉及到的基础知识。首先看这段代码： var ctx=document.getElementById("canvas").getContext("2d");/*这是调用HTMLCanvasElement对象的getContex方法，为画布返回绘图上下文，这里是采用2d上下文 ctx.fillStyle="yellow"; ctx.strokeStyle="black";/*这两句代码...

首页 / CANVAS / canvas实现按住鼠标移动绘制出轨迹的方法实例

canvas实现按住鼠标移动绘制出轨迹的方法实例

内容导读

内容图文

需求

鼠标按住绘制轨迹

原理

源码

内容总结

内容备注

内容手机端

【canvas实现按住鼠标移动绘制出轨迹的方法实例】教程文章相关的互联网学习教程文章

CANVAS - 相关标签

实例 - 相关标签

鼠标 - 相关标签

CANVAS - 最新教程

CANVAS - 最热教程