beginPath() Method to start a path , Or reset the current path .w3school Explanation above !

The path is a canvas A very important concept in English , Just started learning canvas Most people don't understand the path very well , They are using canvas I'll use it indiscriminately when I'm in the hospital beginPath(), Today I made a little demo To illustrate the path

<html lang="en-US">
<canvas id=myCanvas width=500px height=500px></canvas> <script>
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d"); context.fillStyle = "#e4e4e4";
context.fillRect(0,0,500,500); context.beginPath(); context.moveTo(100,100);
context.lineTo(200,100);
context.strokeStyle = "red";
context.stroke(); context.beginPath();
context.moveTo(100,200);
context.lineTo(200,200);
context.strokeStyle = "blue";
context.stroke();
</script>
</html>

If you don't change this code , A red line and a blue line displayed , You're going to think , There's nothing to say , It must be .

Next, let's take the second one context.stroke() Annotate it , You'll find that the end result is just a blue line , Because the first path doesn't have stroke(), Then

context.beginPath(); 

It opens up a new path , So that we can only draw a straight line of the second path , Do you find it more and more magical ?

And then I don't comment context.stroke(), But the context.beginPath() Annotate it , What did you find ? It's amazing , You found a purple line and a blue line , Why? ? It turned out that there was no new path , So the second one stroke() I redrawn the first line , And blue , And the first one stroke() The first line has been drawn in red , The combination of blue and red becomes purple , second

context.stroke(); Painted blue .

Do you think , If you put beginPath() and stroke() What would happen if they were all annotated ? Two blue lines ,you are good

HTML5 canvas beginPath() More articles on methods

  1. HTML5 canvas translate() Method

    HTML5 canvas translate() Method translate() Method to remap... On the canvas (0,0) Location .

  2. HTML5 canvas clearRect() Method

    Browser support Internet Explorer 9.Firefox.Opera.Chrome as well as Safari Support clearRect() Method . notes :Internet Explorer 8 or ...

  3. HTML5 canvas getImageData() Method

    The following code passes through getImageData() Copy the pixel data of the specified rectangle on the canvas , And then through putImageData() Put the image data back on the canvas : var c=document.getElementById(& ...

  4. Improve HTML5 canvas Several methods of performance

    brief introduction HTML5 canvas It started with apple (Apple) An experiment of , Now it has become web There's a lot of support in 2D Quick mode drawing (2Dimmediate mode graphic) Standards for . Many developers now benefit from ...

  5. html5 canvas Solution of serrated burr at the moving end of drawing

    Use HTML5 Of canvas Elements . Tests on mobile phones have found that there is a bit of sawtooth in drawing The reason for this problem should be that the width of the mobile phone is 720 Pixel , And this canvas It's less than 720 Pixels , So in 720 image ...

  6. HTML5 Canvas The basic use of drawing , H5 Use Canvas mapping

    Canvas yes H5 Part of , Allows scripting languages to render images dynamically .Canvas Define an area , Can be html Property defines the width and height of the area ,javascript The code can access the area , Through a complete set of drawing functions (API), Online ...

  7. HTML5 Programming - Use HTML5 Canvas API

    Please follow this example code to implement each example ,30 Minutes later , You'll shout :“HTML5 Canvas?! In front of my brother , That's nothing !” ha-ha . Don't be scared by scrollbars , A lot of code and pictures . I didn't write it separately , But it's a catalog for you , Fang ...

  8. HTML5 Canvas Draw the turntable draw

    The new project : complete Canvas Turntable lottery code https://github.com/givebest/GB-canvas-turntable demonstration http://blog.givebest.cn/GB-ca ...

  9. Learning notes :HTML5 Canvas Drawing simple figures

    HTML5 Canvas Drawing simple figures 1. add to Canvas label , add to id for js operation . <canvas id="mycanvas" height="700" ...

Random recommendation

  1. ORA-28001: the password has expired (DBD ERROR: OCISessionBegin) EM Unable to login

    Let's start with a complaint , Mingming just finished , When it was released, it said it didn't log in , It's all gone . Open today EM Discovery tips ORA-28001: the password has expired (DBD ERROR: OCISessi ...

  2. delphi TServerSocket The multithreading

    http://blog.sina.com.cn/s/blog_471218c2010001qc.html unit U_dxc; interface uses  Windows, Messages, ...

  3. Android Upper Badge, Quickly add corner markers to applications

    The applied corner marker is iOS A feature of , Native Android Does not support . Maybe it was because iOS The notice column is rather cocky ( Of course, it's improved a lot now ), and Android The notification bar is powerful ? That's why there's a party that depends on the number of corners , One side insists on a strong ...

  4. The early use of maven All kinds of problems are recorded

    Cannot change version of project facet Dynamic Web Module to 2.5? terms of settlement : take web.xml In the configuration file <web-app ver ...

  5. mysql Character functions

    1.CONCAT()   Character connection (1)mysql> SELECT CONCAT('imooc', 'MYSQL');+--------------------------+| CONCAT(' ...

  6. Week8——hashcode() and equals() Method

    equals() Method  Object Class equals Methods and “==” It's the same , There is no difference between , That is, the comparison of two objects is to compare the memory address stored in their stack memory . and String class ,Integer Class and so on, some classes , It's rewritten equ ...

  7. visual box install centos7 after , Unable to access the Internet

    ifconfig  After the command , I only see a loopback network card : Get into /etc/sysconfig/network-scripts after , Found a device visual box Set in the for “ Bridge network card ”, Also no problem , Finally, change the control chip to ...

  8. JavaWeb——JavaWeb Introduction to development

    One . Basic concepts 1.1.WEB Development related knowledge WEB, In English web The meaning of a web page , It is used to show Internet Resources on the host for external access . Internet It's for the outside world to visit Web Resources are divided into : static state web resources ( ...

  9. JDBC_ Design architecture _ Driver class loading _ establish Connection_ The efficiency test

    JDBC(Java DataBase Connection) Access the database process : Drive manager -- Connect to database --sql sentence -- Result set load mysql drive Class.forName("com.jd ...

  10. 【Java】 About Spring Summary of the framework ( One )

    This paper sums up some ideas about Spring Understanding of the framework , Attention points and basic operation . If there's something wrong , Criticism and suggestions are welcome . Let's work together ! Spring Introduction to the framework Spring It's an open source framework , It is created to solve the complexity of enterprise application development ...