Web Front-end
H5 Tutorial
HTML5 Canvas - An example of using paths to draw lines_html5 tutorial skills
HTML5 Canvas - An example of using paths to draw lines_html5 tutorial skills
http://www.lifelaf.com/blog/?p=371
This article is translated from Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “Using Paths to Create Lines ”
For HTML5 Canvas, we can use “path” to draw any graphics. A path is simply a series of points and the lines connecting these points. Any Canvas context will only have one "current path", and when context.save() is called, the "current path" will not be saved.
The beginning and end of the path
Call beginPath() to start a path, and calling closePath() will end the path. If you connect points in a path, the connection forms a "subpath." We consider a "subpath" to be "closed" if the last point in the "subpath" is connected to its own first point.
Drawing of lines
The most basic path operation consists of repeatedly calling the moveTo() and lineTo() commands. For example, the following example:
function drawScreen() {
context.strokeStyle = "black";
context.lineWidth = 10;
context.lineCap = 'square';
context.beginPath();
context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke();
context.closePath();
}
in the above example , we draw a horizontal line segment with a width of 10 pixels; at the same time, we also set the lineCap and strokeStyle properties. The following is a list of some commonly used attributes:
lineCap
lineCap defines the style of both ends of the line segment in Canvas, and can be set to one of the following three values:
butt. Default; adds straight edges at both ends of the line segment.
round. Add a semicircular wire cap at each end of the wire segment. The diameter of the wire cap is equal to the width of the wire segment.
square. Add square wire caps to both ends of the wire segment. The side length of the wire cap is equal to the width of the line segment.
lineJoin
lineJoin defines the corner style at the intersection of two line segments. The following are three optional values:
miter. Default; creates a sharp corner. You can limit the length of the cusp by setting the miterLimit attribute - miterLimit is the maximum value of the ratio of the cusp length to the line width, and the default is 10.
bevel. Create a bevel.
round. Create a rounded corner.
lineWidth
lineWidth defines the thickness of the line, the default is 1.0.
strokeStyle
strokeStyle defines the color and other styles used to render lines.
Translation Note: When lineJoin is set to miter, but the length of the sharp corner exceeds the limit of miterLimit, Canvas will display the "bevel" corner effect.
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
Different uses of slashes and backslashes in file paths
Feb 26, 2024 pm 04:36 PM
A file path is a string used by the operating system to identify and locate a file or folder. In file paths, there are two common symbols separating paths, namely forward slash (/) and backslash (). These two symbols have different uses and meanings in different operating systems. The forward slash (/) is a commonly used path separator in Unix and Linux systems. On these systems, file paths start from the root directory (/) and are separated by forward slashes between each directory. For example, the path /home/user/Docume
How to fix error: Main class not found or loaded in Java
Oct 26, 2023 pm 11:17 PM
This video cannot be played due to a technical error. (Error Code: 102006) This guide provides simple fixes for this common problem and continue your coding journey. We will also discuss the causes of Java errors and how to prevent it in the future. What is "Error: Main class not found or loaded" in Java? Java is a powerful programming language that enables developers to create a wide range of applications. However, its versatility and efficiency come with a host of common mistakes that can occur during development. One of the interrupts is Error: Main class user_jvm_args.txt not found or loaded, which occurs when the Java Virtual Machine (JVM) cannot find the main class to execute a program. This error acts as a roadblock even in
What is the difference in the 'My Computer' path in Win11? Quick way to find it!
Mar 29, 2024 pm 12:33 PM
What is the difference in the "My Computer" path in Win11? Quick way to find it! As the Windows system is constantly updated, the latest Windows 11 system also brings some new changes and functions. One of the common problems is that users cannot find the path to "My Computer" in Win11 system. This was usually a simple operation in previous Windows systems. This article will introduce how the paths of "My Computer" are different in Win11 system, and how to quickly find them. In Windows1
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
Linux kernel source code storage path analysis
Mar 14, 2024 am 11:45 AM
The Linux kernel is an open source operating system kernel whose source code is stored in a dedicated code repository. In this article, we will analyze the storage path of the Linux kernel source code in detail, and use specific code examples to help readers better understand. 1. Linux kernel source code storage path The Linux kernel source code is stored in a Git repository called linux, which is hosted at [https://github.com/torvalds/linux](http
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.
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
How to find the storage path of RPM files in Linux system?
Mar 14, 2024 pm 04:42 PM
In Linux systems, RPM (RedHatPackageManager) is a common software package management tool used to install, upgrade and delete software packages. Sometimes we need to find the storage path of an installed RPM file for search or other operations. The following will introduce how to find the storage path of the RPM file in the Linux system, and provide specific code examples. First, we can use the rpm command to find the installed RPM package and its storage path. Open
