Detailed introduction to HTML5 canvas basic drawing line segment code examples-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Detailed introduction to HTML5 canvas basic drawing line segment code examples

Mar 14, 2017 pm 03:44 PM

canvas html5

<canvas></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

<canvas></canvas> 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.

<canvas></canvas> 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 <canvas>> element:

1. Get the

DOM object corresponding to the <canvas> 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 <canvas> drawing example:

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

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

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!

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