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

黄舟Original: 2017-03-14 15:44:161973browse

3856173a0eceb679792f65a38e1fcb00c2caaf3fc160dd2513ce82f021917f8b 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

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b 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.

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b 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 5ba626b379994d53f7acf72a64f9b697> element:

1. Get the

DOM object corresponding to the 5ba626b379994d53f7acf72a64f9b697 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 5ba626b379994d53f7acf72a64f9b697 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>

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>

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!

Statement：

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

Previous article：Detailed explanation of nav tag in HTML5Next article：Detailed explanation of nav tag in HTML5

See more

Detailed introduction to HTML5 canvas basic drawing line segment code examples

Related articles