Web Front-end
H5 Tutorial
How to draw a rectangle with canvas? Introduction to two methods of drawing rectangles on canvas
How to draw a rectangle with canvas? Introduction to two methods of drawing rectangles on canvas
The canvas element uses JavaScript to draw images on web pages. The canvas is a rectangular area that you can control every pixel of. canvas has many ways to draw paths, rectangles, circles, characters, and add images. So, How to draw a rectangle using canvas? The following article will introduce to you the implementation method of drawing a rectangle on canvas. You can take a look if you need it.
What we need to know is that the method related to rectangles in canvas is rect(). Use the stroke() or fill() method to actually draw a rectangle on the canvas.
The rect() method can receive 4 parameters: the x coordinate of the rectangle, the y coordinate of the rectangle, the width of the rectangle, and the height of the rectangle. The units of these parameters are pixels.
Next we will use the strokerect() and fillrect() methods to draw a rectangle.
First, let’s take a look at an example of a filled rectangle drawn using the fillrect() method in canvas.
The fillRect() method draws a rectangle on the canvas that is filled with the specified color. The color of the fill is specified through the fillStyle property.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas画矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象
context.fillStyle = "green"; // 设置或返回用于填充绘画的颜色、渐变或模式
context.fillRect(50,50,400,300); // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形
}
draw("canvas");
</script>
</body>
</html>The effect of drawing a filled rectangle on canvas is as follows:
##Then Let's take a look at an example of an unfilled rectangle drawn using the strokerect() method in canvas.
The strokeRect() method draws a rectangle on the canvas that is stroked with the specified color. The stroke color is specified through the strokeStyle property.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas画矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象
context.strokeStyle = "pink"; //图形边框的填充颜色
context.lineWidth = 5; //用宽度为 5 像素的线条来绘制矩形：
context.strokeRect(50,50,180,120); //绘制矩形（无填充）
context.strokeRect(110,110,180,120);
}
draw("canvas");
</script>
</body>
</html>The effect of drawing an unfilled rectangle on canvas is as follows:
HTML5 Development Manual.
The above is the detailed content of How to draw a rectangle with canvas? Introduction to two methods of drawing rectangles on canvas. 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
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
1389
52
What is the area of a circle within a rectangle inscribed in a semicircle?
Sep 13, 2023 am 08:45 AM
A circle inscribed in a rectangle is tangent to the longer side of the rectangle, that is, its length is tangent to the circle. A rectangle inscribed in a semicircle touches two points on the arc of the semicircle. The width of the rectangle is equal to the diameter of the circle. If R is the radius of the semicircle. The length of the rectangle = √2R/2 The width of the rectangle = R/√2 The radius of the inscribed circle is r = b/2 = R/2√2 Using this formula we can calculate the rectangle inscribed in the semicircle The area of a circle, area = (π*r2)=π*R/8 Example Demonstration #include<stdio.h>intmain(){&
How to merge a graphic after CAD rectangles are scattered
Feb 28, 2024 pm 12:10 PM
When using CAD software, we often encounter situations where we need to recombine "scattered" rectangular objects into a single graphic. This need arises in many fields, such as space planning, mechanical design and architectural drawings. In order to meet this demand, we need to understand and master some key functions in CAD software. Next, the editor of this website will introduce you in detail how to complete this task in the CAD environment. Users who have doubts can come and follow this article to learn. Method for merging CAD rectangles into one graphic after breaking them up: 1. Open the CAD2023 software, create a rectangle, and then enter the X command and a space. As shown below: 2. Select the rectangular object and space it. You can break up the objects. 3. Select all open lines
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.
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
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
Write a Java program to calculate the area and perimeter of a rectangle using the concept of classes
Sep 03, 2023 am 11:37 AM
The Java language is one of the most commonly used object-oriented programming languages in the world today. The concept of classes is one of the most important features of object-oriented languages. A class is like a blueprint for an object. For example, when we want to build a house, we first create a blueprint of the house, in other words, we create a plan that shows how we are going to build the house. According to this plan we can build many houses. Likewise, using classes, we can create many objects. Classes are blueprints for creating many objects, where objects are real-world entities like cars, bikes, pens, etc. A class has the characteristics of all objects, and the objects have the values of these characteristics. In this article, we will write a Java program to find the perimeter and faces of a rectangle using the concept of classes
