Canvas is part of HTML5 and allows scripting languages to dynamically render images. Canvas defines an area. The width and height of the area can be defined by HTML attributes. JavaScript code can access the area and render dynamic renderings on the web page through a complete set of drawing functions (API).
2. What Canvas can doGames: There is no doubt that games play an important role in the field of HTML5. HTML5 is more three-dimensional and more sophisticated than Flash in terms of Web-based image display.
Chart production: Chart production is often ignored by people, but communication and cooperation within an enterprise or between enterprises are inseparable from charts. Some developers now use HTML/CSS to create icons. Of course, using SVG (Scalable Vector Graphics) to complete chart production is also a very good way.
Font design: Custom rendering of fonts will be completely web-based and implemented using HTML5 technology.
Graphics editor: The graphics editor can be 100% web-based.
Other content that can be embedded in the website: like graphics, audio, video, and many other elements can be better integrated with the Web and do not require any plug-ins.
3. Basic usage of Canvas1. When using <canvas>, you must first set its width and height attributes and specify the size of the drawable area. If you only specify the width and height without adding styles or drawing images, the element will not be visible on the page.
<canvas id='draw' width='200px' height='200px'></canvas>
2. To draw an image, we first need to get the canvas and call the getContext() method, and then pass in the context name (2D/3D). 2D has two basic drawing operations | fill (fillStyle) | stroke (strokeStyle) | The default value of these two properties is #000
var draw = document.getElementById('draw'); //Confirm whether the browser supports the <canvas> element if(draw.getContext){ var context = draw.getContext('2d'); //Draw a red border to the context context.strokeStyle = '#f00'; //The color of the interior filled prairie context.fillStyle = '#0f0';}3. Use the toDataURL() method to export the image drawn on the <canvas> element.
var draw = document.getElementById('draw');if(draw.getContext){ //Display the image, toDataURL() gets a string of base64 string var drawURL = draw.toDataURL('image/png') ; var image = document.createElement('img'); image.src = drawURL; document.body.appendChild(image); }4. There are three main methods for drawing a rectangle. fillRect() is the fill color of the rectangle, strokeRect() is the stroke of the rectangle, and clearRect() clears the rectangle. These three methods all receive 4 parameters x/y/w/h, the coordinates of the upper left corner of the rectangle and the width and height.
var draw = document.getElementById('draw'); //Confirm whether the browser supports the <canvas> element if(draw.getContext){ var context = draw.getContext('2d'); //Draw a red rectangle and a green outline Edge context.fillStyle = '#f00'; context.strokeStyle = '#0f0'; context.strokeRect(10,10,50,50); context.fillRect(10,10,50,50); //Draw a green rectangle with a red stroke context.fillStyle = '#0f0'; context.strokeStyle = '#f00'; context.strokeRect(10,10,50, 50); context.fillRect(10,10,50,50); //Clear a small rectangle where the two rectangles overlap context.clearRect(40,40,10,10);}5. Draw paths. Complex shapes and lines can be created through paths. To draw a path, first call the beginPath() method, and then use the following method to actually draw the path.
arc(x,y,radius,startAngle,endAngle,conterclockwise)
(x, y) circle center coordinates, radius, (startAngle, endAngle) starting angle and ending angle, conterclockwise clockwise (false)/counterclockwise (true)
moveTo(x,y) moves the cursor to (x,y) without drawing a line. Can be used to modify the so-called previous point coordinates*
arcTo(x1,y1,x2,y2,radius)
Draw a curve starting from the previous point to (x2, y2) and passing through (x1, y1) with the given radius
lineTo(x,y) draws a straight line from the previous point to (x,y)
rect(x,y,width,height)
Draw a rectangle starting from (x, y), with width and height as width and height. This method draws a rectangular path instead of the independent shapes drawn by strokeRect() and fillRect()
//Next draw a clock without numbers var draw = document.getElementById('draw');if(draw.getContext){ var context = draw.getContext('2d'); //Start path context.beginPath( ); //Draw the outer circle context.arc(100,100,99,0,2*Math.PI,false); //Draw the inner circle context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //Draw the minute hand context.moveTo(100,100); context.lineTo(100,15) ; //Draw the hour hand context.moveTo(100,100); context.lineTo(35,100); //Stroke path context.stroke(); context.strokeStyle = '#f00'; }6. There are two main methods for drawing text, fillText() and strokeText(), both of which receive four parameters |text (text to be drawn)|x|y|maximum pixel width (optional)|. These two methods are based on the following three attributes
font text style, size, font, etc.
textAlign text alignment |start|end|left|right|center|
textBaseline The baseline of the text|top|hanging|middle|alphabetic|ideographic|bottom|
//Draw 12 o'clock on the dial context.font = 'bold 12px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText('12',100,20);7. Transformation
rotate(angel) rotates the image angle radians around the origin
scale(scaleX,scaleY) scales the image, x*scaleX,y*scaleY defaults to 1
translate(x,y) moves the coordinate origin to (x,y)
var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); //Start path context.beginPath(); //Draw outer circle context.arc( 100,100,99,0,2*Math.PI,false); //Draw the inner circle context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //Transform the origin context.translate(100,100); //Rotate the hand context.rotate(1) //Draw the minute hand context.moveTo(0, 0); context.lineTo(0,-85); //Draw the hour hand context.moveTo(0,0); context.lineTo(-65,0); //Stroke path context.stroke(); context.strokeStyle = '#f00'; }8. Draw an image, drawImage()
var img = document.getElementByTagNames('image')[0]; context.drawImage(img,0,10,50,50,0,100,40,60);9 parameters: the image to be drawn, the original image |x|y|w|h|, the target image |x|y|w|h|
9. Shadows and gradients
Shadow mainly has the following attribute values:
var context = draw.getContext('2d'); //Set shadow context.shadowColor = 'rgba(210,210,210,.5)'; context.shadowOffersetX = '5'; Gradient creates a new linear gradient createLinearGradient() method, There are four parameters |x1|y1|x2|y2| which are the coordinates of the starting point and the coordinates of the end point var gradient = context.createLinearGradient(30,30,70,70); gradient.addColorStop(0,'#fff'); //0 means start gradient.addColorStop(1,'#000'); //1 means end//Use The defined gradient attribute context.fillStyle = gradient; //Put in the gradient when filling context.fillRect(30,30,50,50);Create a radial gradient createRadialGradient(), the six parameters |x1|y2|radius1|x2|y2|radius2| are the first circle center and radius and the second circle center and radius respectively. The usage is the same as linear gradient.
10. Using image data, you can obtain the original image data through getImageData(). Four parameters |x|y|w|h|. Each ImageData object has three attributes, width/height/data. Data is an array that stores the data of each pixel internally. The value of each element is between 0-255.
var imgdata = context.getImageData(0,0,100,100); var data = imgdata.data, red = data[0], green = data[1], blue = data[2], alpha = data[3]; //Implementation A gray filter var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); var img = document.getElementsByTagName('image')[0], imageData,data, i,len,average, red,green,blue,alpha; //Draw the original image context.drawImage(img,0,0,100,100); //Get Image data imageData = context.getImageData(0,0,img.width,img.height); data = imageData.data; for(i=0,len=data.length;i<len;i+=4){ red = data[i]; green = data[i+1]; blue = data[i+2]; alpha = data[ i+3]; //Calculate the average of rgb average = Math.floor((red+green+blue)/3); //Set the color value data[i] = average; data[i+1] = average; data[i+2] = average; } imageData.data = data; //Draw data on the canvas context.putImageData(imageData,0,0)}The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.