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
<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.strokeStyle = "red";
context.strokeStyle = "blue";
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
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 translate() Method
HTML5 canvas translate() Method translate() Method to remap... On the canvas (0,0) Location .
- HTML5 canvas clearRect() Method
Browser support Internet Explorer 9.Firefox.Opera.Chrome as well as Safari Support clearRect() Method . notes :Internet Explorer 8 or ...
- 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(& ...
- 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 ...
- 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 ...
- HTML5 Canvas The basic use of drawing , H5 Use Canvas mapping
- 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 ...
- 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 ...
- 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" ...
- 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 ...
- delphi TServerSocket The multithreading
http://blog.sina.com.cn/s/blog_471218c2010001qc.html unit U_dxc; interface uses Windows, Messages, ...
- 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 ...
- 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 ...
- mysql Character functions
1.CONCAT() Character connection (1)mysql> SELECT CONCAT('imooc', 'MYSQL');+--------------------------+| CONCAT(' ...
- 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 ...
- 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 ...
- 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 ( ...
- 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 ...
- 【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 ...