HTML5 | basic Canvas operations, html5canvas

HTML5 | basic Canvas operations, html5canvas

<Canvas>-defines how to draw images using JavaScript.

P.s.

• You cannot use CSS to set the size of the canvas. either use width and height separately in <canvas> or set it in js. The default size of the canvas is 300x150.
• GetContext is the method of the DOM object, that is, the native js method. It cannot be directly obtained using the jQuery object.

--------------------------------------------

Demo1-draw a rectangle

Steps:

<Canvas. js>

Function draw (elem) {// 1. obtain the canvas Element var canvas = document. getElementById (elem); canvas. width = "600"; canvas. height = "500"; // 2. obtain the context var context = canvas. getContext ('2d '); // 3. fill and draw the border context. fillStyle = '# 000'; // 4. set the painting style context. strokeStyle = '# f60'; // 5. specifies the width of the paint brush context. lineWidth = 3; // 7. draw a rectangular context. fillRect (100,0, 300,400); context. strokeRect (130,100,180,120 );}

<Index.html>

<! DOCTYPE html> 
--------------------------------------------
Demo2-draw a circle
Steps:

<Canvas. js>
Function draw (elem) {var canvas = document. getElementById ('canvas '); canvas. width = 600; canvas. height = 500; var context = canvas. getContext ('2d '); context. fillStyle = "# eeefff"; context. fillRect (0, 0,600,500); for (var I = 0; I <10; I ++) {context. beginPath (); // create the start path context. arc (I * 20, I * 30, I * 10, 0, Math. PI * 2, true); // create the image path context. closePath (); // close the path context after creation. fillStyle = "rgba (0.25, 0,)"; // path style context. fill ();}}
--------------------------------------------
Demo3-draw text

<Canvas. js>
Function draw (elem) {var canvas = document. getElementById ('canvas '); canvas. width = 800; canvas. height = 300; context = canvas. getContext ('2d '); context. fillStyle = "green"; context. fillRect (0, 0,800,300); // set the text color context. fillStyle = "# fff"; context. strokeStyle = "# fff"; // set the font context. font = "bold 40px 'kaiti', 'simsun', 'Microsoft yahei'"; // sets the alignment mode context. textAlign = 'start'; context. textBaseline = 'bottom '; // sets the context. fillText ('draw text', 200, 50); // fill mode context. strokeText ('draw text', 100,150); // context in the profile mode. fillText ('000000', 1111111111111111111111111111111111111111111); // prevents overflow. If it exceeds the width, it will be compressed}
--------------------------------------------
Demo4-save the file
Canvas API is used to save a file and dynamically output it to the data pointed to by a data URL address through the painting status.
ToDataURL () method
<Canvas. js>
1 function draw(elem) {2     var canvas = document.getElementById(elem);3     canvas.width = 800;4     canvas.height = 500;5     var context = canvas.getContext('2d');6     context.fillStyle = "#eeefff";7     context.fillRect(0,0,800,500);8     window.location = canvas.toDataURL('image/jpeg');9 }
--------------------------------------------
Demo5-simple animation
Html dom setInterval () method

<Canvas. js>
Function draw (elem) {var canvas = document. getElementById (elem); canvas. width = 800; canvas. height = 500; var context = canvas. getContext ('2d '); context. fillStyle = "# eeefff"; context. fillRect (0, 0,800,500); context. fillStyle = '# f90'; // erase a part of context from the canvas. clearRect (50, 50, canvas. width-50, canvas. height-50); // execute the painting () function every 100 ms and draw a new small box var I = 0; var paintId = setInterval (painting,); function painting () {++ I; context. fillRect (80 + I * 15, 80, 10, 10); if (I = 20) {clearInterval (paintId );}}}