Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > Detailed introduction to HTML5 canvas basic drawing line segment code examples

Detailed introduction to HTML5 canvas basic drawing line segment code examples

黄舟
Release： 2017-03-14 15:44:16
Original
1995 people have browsed it

<canvas> is a new tag in HTML5, which is used to draw graphics. This article is mainly for everyone This article introduces the basic drawing method of drawing line segments in HTML5 canvas in detail. Interested friends can refer to it

is HTML5 The newly added tag is used to draw graphics. In fact, this tag is the same as other tags. Its special feature is that this tag can obtain a CanvasRenderingContext2D object. We can use JavaScriptScript to control the object for drawing.

is just a container for drawing graphics. In addition to id, class, style and other attributes, There are also height and width properties. There are three main steps for drawing on the > element:

1. Get the

DOM object corresponding to the element, which is a Canvas object; 2. Call the getContext() method of the Canvas object to get a CanvasRenderingContext2D object;
3. Call the CanvasRenderingContext2D object for drawing.

Draw line segments moveTo() and lineTo()

The following is a simple drawing example: 

XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>canvas绘图演示</title>  
    <style type="text/css">  
        #canvas{   
            border: 1px solid #ADACB0;   
            display: block;   
            margin: 20px auto;   
        }   
    </style>  
</head>  
<body>  
    <canvas id="canvas" width="300" height="300">  
        你的浏览器还不支持canvas   
    </canvas>  
</body>  
<script type="text/javascript">  
    var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    //设置对象起始点和终点   
    context.moveTo(10,10);   
    context.lineTo(200,200);   
    //设置样式   
    context.lineWidth = 2;   
    context.strokeStyle = "#F5270B";   
    //绘制   
    context.stroke();   
</script>  
</html>
Copy after login



Detailed introduction to HTML5 canvas basic drawing line segment code examples#If not specified through moveTo(), The starting point of lineTo() is based on the previous point. Therefore, if you need to reselect the starting point, you need to pass the moveTo() method. If you need to set styles for different line segments, you need to reopen a path through context.beginPath(). The following is an example: 

JavaScript Code复制内容到剪贴板
<script type="text/javascript">   
    var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    //设置对象起始点和终点   
    context.beginPath();   
    context.moveTo(100,100);   
    context.lineTo(700,100);   
    context.lineTo(700,400);   
    context.lineWidth = 2;   
    context.strokeStyle = "#F5270B";   
    //绘制   
    context.stroke();   
  
    context.beginPath();   
    context.moveTo(100,200);//这里的moveTo换成lineTo效果是一样的   
    context.lineTo(600,200);   
    context.lineTo(600,400);   
    //strokeStyle的颜色有新的值，则覆盖上面设置的值   
    //lineWidth没有新的值，则按上面设置的值显示   
    context.strokeStyle = "#0D25F6";   
    //绘制   
    context.stroke();   
</script>
Copy after login



The above is the detailed content of Detailed introduction to HTML5 canvas basic drawing line segment code examples. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
canvas html5
source：php.cn
Previous article：Detailed explanation of nav tag in HTML5 Next article：Briefly introduce the new and removed elements of HTML5
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
What is the difference between enctype and formenctype in HTML5? I'm just wondering what's the difference between the attributes enctype and formenctype in...
From 2024-04-02 11:47:56
0
1
275
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template