Canvas Learning Notes (1)

  canvas, html5, javascript

I like the front-end and the original motivation for learning the front-end is that it can produce very cool effects. However, the skills I use to go to work now are mostly in business logic, not what I originally wanted to do. So after work, I plan to pick up my interest again and learn the real “cool” things.
Canvas is one of the sharp tools that can enable me to achieve my goals. I hope this note can urge me to finish my study efficiently and share my learning experience.

Learning resources come fromMassive open online course Net/Brilliant Countdown Effect Canvas Drawing and Animation FoundationThank you very much @ liuyubobo for sharing the course!

Create label

Html5<canvas>The label defines a “canvas” on which all our drawings are based. So on the page we first declare a canvas tag with an id

<canvas width="1024" height="668" style="border:1px solid #aaa;   margin:0 auto;"  id="canvas">
 Your browser version is too tm old
 </canvas>

Why is it defined directly in the labelwidthAndheightWell, it’s because

HerewidthAndheightCanvas’s own attribute, not css3’s. If only css3 is used to define the width and height, it only limits the size of this canvas and has no restriction on the display problems such as content resolution (this sentence needs to be verified). The advantage of defining these two attributes directly in the label is that the problem of canvas size and actual display can be solved simultaneously.

The text content in the middle of the tag is the prompt words that appear automatically when the browser does not support canvas, which will be omitted when the browser supports canvas.


After the page labels are created, the actual canvas drawing begins. It is completely controlled by js, so everything we do about drawing is done in js.

Create drawing context

In js, we define it this way:

var canvas = document.getElementById('canvas');
 var cxt = canvas.getContext('2d');

First get the canvas object, and then execute its.getContext('2d')Method to create a drawing context environmentcxt. In the future, all drawing on this canvas will be completed by calling this cxt different method. Once the environment is set up, real operations can be carried out.

Draw a figure

The tutorial is very clear. I will not repeat it here. I will mainly summarize the functions, effects and precautions of different methods.

//Place the nib on the canvas 100, 100
 cxt.moveTo(100, 100)
 //Draw from 100,100 to 700,700
 cxt.lineTo(500,500)
 //Continue painting it
 cxt.lineTo(500,100)
 cxt.lineTo(100,100)
 //Set Line Width
 cxt.lineWidth = 5
 //Set Line Style (Color)
 cxt.strokeStyle = 'pink'
 //Set Fill Color
 cxt.fillStyle = 'lightblue'
 cxt.fill()
 //Tell canvas that I have finished drawing and execute the stroke () method.
 cxt.stroke()

The teacher repeatedly stressed in the tutorial that canvas is a drawing based on “state”, that is, how do I define itmoveTo(),lineTo()Such methods, I define is a “how do I want to draw” state, is “not written down”, and when I have thought about, define the state, then implement the “draw ideas” method, namely execution.fill().stroke()Such as method, tell canvas “I want to draw!” , and then draw the content.

It is precisely because canvas is state-based, so different states should have clear starting marks.If we want to draw a triangle and a straight line of different colors, we may write this way.

//Place the nib on the canvas 100, 100
 cxt.moveTo(100, 100)
 //Draw from 100,100 to 700,700
 cxt.lineTo(500,500)
 //Continue to draw this triangle
 cxt.lineTo(500,100)
 cxt.lineTo(100,100)
 //Set the triangle line color to pink (I like pink especially)
 cxt.strokeStyle = 'pink'
 //Tell canvas that I have finished drawing and execute the stroke () method.
 cxt.stroke()
 
 
 //Draw a new line
 cxt.moveTo(50, 100)
 cxt.lineTo(450,500)
 //Set the color of this line to light blue.
 cxt.strokeStyle = 'lightblue'
 //Tell canvas that I have finished drawing and execute the stroke () method.
 cxt.stroke()

See how it works:
图片描述
Because canvas is based on state, however, the two states are not distinguished (canvas is not so intelligent), so the lattercxt.strokeStyle = 'lightblue'It will cover the front, that is, it has only one line color. So how do you define different states for it? There are two methods, please look at the code

cxt.beginPath()
 //Place the nib on the canvas 100, 100
 cxt.moveTo(100, 100)
 //Draw from 100,100 to 700,700
 cxt.lineTo(500,500)
 //Continue to draw this triangle
 cxt.lineTo(500,100)
 cxt.lineTo(100,100)
 //Set the triangle line color to pink (I like pink especially)
 cxt.closePath()
 cxt.strokeStyle = 'pink'
 //Tell canvas that I have finished drawing and execute the stroke () method.
 cxt.stroke()
 
 cxt.beginPath()
 //Draw a new line
 cxt.moveTo(50, 100)
 cxt.lineTo(450,500)
 cxt.closePath()
 //Set the color of this line to light blue.
 cxt.strokeStyle = 'lightblue'
 //Tell canvas that I have finished drawing and execute the stroke () method.
 cxt.stroke()

Among them,beginPath()Tell canvas I think I’ll draw a paragraph from here.Path,closePath()Declares the end of the path. Although these two methods are wrapped up.stroke()Methods also take effect, but for semantic purposes, path refers to paths, so we can only use these two methods to wrap paths. Look at the effect:

图片描述

To be continued.