Web Front-end
H5 Tutorial
How to use canvas to draw a trajectory by holding down the mouse and moving it
How to use canvas to draw a trajectory by holding down the mouse and moving it
This article mainly introduces the sample code for using canvas to draw a trajectory by holding down the mouse and moving it. The content is quite good. I will share it with you now and give it as a reference.
Summary
Since I started working, I have written about vue, react, regular rules, algorithms, small programs, etc., but I have never written about canvas, because I really don’t know how!
In 2018, set a small goal for yourself: learn canvas, and the effect achieved is to be able to use canvas to realize some animations that are not easy to achieve with CSS3.
This article is the first gain from learning canvas. The first demo that many people do when learning canvas is to implement a "clock". Of course, I also implemented one, but instead of talking about this, I will talk about it. A more interesting and simpler thing.
Hold down the mouse to draw the track
Requirements
On a canvas canvas, the initial state of the canvas has nothing No, now, I want to add some mouse events to the canvas and use the mouse to write on the canvas. The specific effect is to move the mouse to any point on the canvas, then hold down the mouse, move the mouse position, and you can start writing!
Principle
Let’s briefly analyze the idea. First, we need a canvas, and then calculate the position of the mouse on the canvas. Bind the onmousedown event and onmousemove event to the mouse, and draw the path during the movement. When the mouse is released, the drawing ends.
Although this idea is very simple, there are some parts that require some tricks to implement.
1. An html file is required, containing canvas elements.
This is a canvas with a width of 800 and a height of 400. Why didn't you write px? Oh, I don’t understand it yet, it’s recommended by the canvas document.
<!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. Determine whether the current environment supports canvas.
In main.js, we write a self-executing function. The following is the code snippet for compatibility judgment. The "code body" will be the core of the implementation requirements.
(function() {
let theCanvas = document.querySelector('#theCanvas')
if (!theCanvas || !theCanvas.getContext) {
//不兼容canvas
return false
} else {
//代码主体
}
})()3. Get the 2d object.
let context = theCanvas.getContext('2d')
4. Get the coordinates of the current mouse relative to the canvas.
Why do we need to obtain this coordinate? Because the mouse defaults to obtaining the relative coordinates of the current window, and the canvas can be located anywhere on the page, calculations are required to obtain the real mouse coordinates.
Encapsulates the acquisition of the real coordinates of the mouse relative to the canvas into a function. If you feel abstract, you can draw a picture on a scratch paper to understand why this operation is required.
Normally, it can be x - rect.left and y - rect.top. But why is it actually x - rect.left * (canvas.width/rect.width)?
canvas.width/rect.width means to determine the scaling behavior in canvas and find the scaling multiple.
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. With the tool function in step 4, we can add mouse events to the canvas!
First bind the onmousedown event to the mouse, and use moveTo to draw the starting point of the coordinates.
theCanvas.onmousedown = function(e) {
//获得鼠标按下的点相对canvas的坐标。
let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
//es6的解构赋值
let { x, y } = ele
//绘制起点。
context.moveTo(x, y)
}6. When moving the mouse, there is no mouse long press event, how should I monitor it?
The little trick used here is to execute an onmousemove (mouse movement) event inside onmousedown, so that the mouse can be monitored and moved.
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. When the mouse is released, the path will no longer be drawn.
Is there any way to prevent the two events monitored above in the onmouseup event? There are many methods. Setting onmousedown and onmousemove to null is one. I used "switch" here. isAllowDrawLine is set to a bool value to control whether the function is executed. For the specific code, please see the complete source code below.
Source code
is divided into 3 files, index.html, main.js, utils.js. The es6 syntax is used here. I configured it using parcle. The development environment is installed, so there will be no errors. If you copy the code directly and an error occurs when running, if the browser cannot be upgraded, you can change the es6 syntax to es5.
1, index.html
It has been shown above and will not be repeated again.
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
}Summary
There is a misunderstanding here. I use the canvas object to bind the event theCanvas.onmouseup. In fact, canvas cannot bind events. What is really bound is document and window. . But since the browser will automatically judge it for you and hand over event processing, there is no need to worry at all.
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Use HTML5
How to draw polygons such as triangles and rectangles with Canvas
The above is the detailed content of How to use canvas to draw a trajectory by holding down the mouse and moving it. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
Which schools use canvas?
Aug 18, 2023 pm 05:59 PM
Schools using canvas include Stanford University, MIT, Columbia University, University of California, Berkeley, etc. Detailed introduction: 1. Stanford University uses Canvas as its main online learning platform. Teachers and students at Stanford University use Canvas to manage and communicate course content, and learn through functions such as online discussions, assignment submissions, and exams; 2. Ma Provincial Polytechnic Institute and MIT also use Canvas as their online learning management system and conduct course management through the Canvas platform; 3. Columbia University, etc.
What are the canvas arrow plug-ins?
Aug 21, 2023 pm 02:14 PM
The canvas arrow plug-ins include: 1. Fabric.js, which has a simple and easy-to-use API and can create custom arrow effects; 2. Konva.js, which provides the function of drawing arrows and can create various arrow styles; 3. Pixi.js , which provides rich graphics processing functions and can achieve various arrow effects; 4. Two.js, which can easily create and control arrow styles and animations; 5. Arrow.js, which can create various arrow effects; 6. Rough .js, you can create hand-drawn arrows, etc.
What are the details of the canvas clock?
Aug 21, 2023 pm 05:07 PM
The details of the canvas clock include clock appearance, tick marks, digital clock, hour, minute and second hands, center point, animation effects, other styles, etc. Detailed introduction: 1. Clock appearance, you can use Canvas to draw a circular dial as the appearance of the clock, and you can set the size, color, border and other styles of the dial; 2. Scale lines, draw scale lines on the dial to represent hours or minutes. Position; 3. Digital clock, you can draw a digital clock on the dial to indicate the current hour and minute; 4. Hour hand, minute hand, second hand, etc.
What versions of html2canvas are there?
Aug 22, 2023 pm 05:58 PM
The versions of html2canvas include html2canvas v0.x, html2canvas v1.x, etc. Detailed introduction: 1. html2canvas v0.x, which is an early version of html2canvas. The latest stable version is v0.5.0-alpha1. It is a mature version that has been widely used and verified in many projects; 2. html2canvas v1.x, this is a new version of html2canvas.
What properties does tkinter canvas have?
Aug 21, 2023 pm 05:46 PM
The tkinter canvas attributes include bg, bd, relief, width, height, cursor, highlightbackground, highlightcolor, highlightthickness, insertbackground, insertwidth, selectbackground, selectforeground, xscrollcommand attributes, etc. Detailed introduction
How to display mouse movement trajectory in edge browser_Steps to display mouse movement trajectory in edge browser
Apr 02, 2024 pm 05:30 PM
1. First open the edge browser and click on the inserted mouse gesture icon. 2. Then click the Settings button in the pop-up window. 3. Then click the shortcut link for advanced settings. 4. Then find the display mouse track setting item. 5. Then check the check box in front of the setting item. 6. In this way, when using mouse gestures, the trajectory of the mouse will be displayed.
uniapp implements how to use canvas to draw charts and animation effects
Oct 18, 2023 am 10:42 AM
How to use canvas to draw charts and animation effects in uniapp requires specific code examples 1. Introduction With the popularity of mobile devices, more and more applications need to display various charts and animation effects on the mobile terminal. As a cross-platform development framework based on Vue.js, uniapp provides the ability to use canvas to draw charts and animation effects. This article will introduce how uniapp uses canvas to achieve chart and animation effects, and give specific code examples. 2. canvas
Learn the canvas framework and explain the commonly used canvas framework in detail
Jan 17, 2024 am 11:03 AM
Explore the Canvas framework: To understand what are the commonly used Canvas frameworks, specific code examples are required. Introduction: Canvas is a drawing API provided in HTML5, through which we can achieve rich graphics and animation effects. In order to improve the efficiency and convenience of drawing, many developers have developed different Canvas frameworks. This article will introduce some commonly used Canvas frameworks and provide specific code examples to help readers gain a deeper understanding of how to use these frameworks. 1. EaselJS framework Ea
