A collection of HTML5 Canvas basic drawing example codes_html5 tutorial skills

Basic drawing

XML/HTML CodeCopy content to clipboard

1. var canvas = document.getElementById('canvas');
2. if (canvas.getContext) {
3. var context = canvas.getContext('2d');
4. // Line width
5. context.lineWidth = 4;
6. // Brush color
7. context.strokeStyle = 'red';
8. // Fill color
9. context.fillStyle = "red";
10. // Line cap type
11.  context.lineCap = 'butt'; // round, square 
12. // Start path
13. context.beginPath();
14. // Starting point
15. context.moveTo(10,10);
16. // End point
17. context.lineTo(150,50);
18. // Drawing
19. context.stroke();
20. ｝

 
Rectangle

XML/HTML CodeCopy content to clipboard

1. var canvas = document.getElementById('canvas');
2. if (canvas.getContext) {
3. context.beginPath();
4. context.strokeRect(10,10,70,40);
5. // Another way of rectangle
6. context.rect(10,10.70,40);
7. context.stroke();
8.  
9. // solid rectangle
10. context.beginPath();
11. context.fillRect(10,10,70,40);
12. // Another way solid rectangle
13. context.beginPath();
14. context.rect(10,10,70,40);
15. context.fill();
16. ｝

 
Round

XML/HTML CodeCopy content to clipboard

1. var canvas = document.getElementById('canvas');
2. if (canvas.getContext) {
3. context.beginPath();
4. // Circle center coordinate x, circle center coordinate Y, arc radius, starting angle, ending angle, whether counterclockwise
5. // The fourth and fifth parameters are the radians to be passed in. If you draw an angle of 30, you need to convert it into radians 30 * Math.PI / 180
6. context.arc(100,100,70,0,130 * Math.PI / 180, true);
7. context.stroke();
8. context.fill();
9. ｝

 
Rounded corners

XML/HTML CodeCopy content to clipboard

1. var canvas = document.getElementById('canvas');
2. if (canvas.getContext) {
3. context.beginPath();
4. context.moveTo(20,20);
5. context.lineTo(70,20);
6. // Draw arc p1.x p1.y p2.x, p2.y arc radius for a path,
7. context.arcTo(120,30,120,70, 50);
8. context.lineTo(120,120);
9. context.stroke();
10.  
11. // Erase canvas artboard
12. context.beginPath();
13. context.fillRect(10,10,200,100);
14.  
15. // Erase area
16. context.clearRect(30,30,50,50);
17. ｝

Quadratic Bezier Curve

XML/HTML CodeCopy content to clipboard

1. var canvas = document.getElementById('canvas');
2. if (canvas.getContext) {
3. context.beginPath();
4. context.moveTo(100,100);
5. context.quadraticCurveTo(20,50,200,20);
6. context.stroke();
7. ｝

Cubic Bezier Curve

XML/HTML CodeCopy content to clipboard

1. var canvas = document.getElementById('canvas');   
2. if (canvas.getContext) {   
3.      context.moveTo(68,130);   
4.      var cX1 = 20;   
5.      var cY1 = 10;   
6.      var cX2 = 268;   
7.      var cY2 = 10;   
8.      var endX = 268;   
9.      var endY = 170;   
10.      context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);   
11.      context.stroke();   
12.         
13.     // 利用clip指定绘图区域，指定绘图区域之后，只能在绘图区域中进行绘图擦欧总   
14.     // 绘制圆形   
15.     context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);   
16.     // 限制区域   
17.     context.clip();   
18.     // 开始尝试绘制其他   
19.     context.beginPath();   
20.     context.fillStyle = 'lightblue';   
21.     // 结果矩形并没有显示出来   
22.     context.fillRect(0,0,300,150);   
23. }  

画板进阶使用

XML/HTML Code复制内容到剪贴板

1. var canvas = document.getElementById('canvas');
2. if (canvas.getContext) {
3. var context = canvas.getContext('2d');
4. /*
5. * drawImage(image,dx,dy)
6. * drawImage(image,dx,dy,dw,dh)
7. * drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
8. * image drawing object
9. * Coordinates of dx dy canvas
10. * dw, dh indicates the position of the image in the canvas to be drawn
11. * sw, sh represents the area of ​​image to be drawn
12. * sx,sy The starting position of the drawing to be drawn
13. */
14. var image = document.getElementById('img');
15. context.drawImage(image, 0, 0);
16. var img = new Image();
17.  img.src = 'images/1.jpg'; 
18. img.onload = function(){
19.                                            
// drawImage
// Start drawing from 0,0 coordinates
// context.drawImage(img,0,0);
// Starting from 0, 0, draw the entire picture to 100,100 length and width
// context.drawImage(img, 0, 0, 100, 100);
// Screenshot, 50,50 to 100,100. Start drawing from 260,130 and place it in the 100,100 length and width area.
// context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);
                                           
27. // Use getImageData and putImageData to draw pictures
29. context.drawImage(img, 10, 10);
30. // Get pixel data from the artboard
31. // Start position, end position
32. var
imgData
33. = context.getImageData(50,50,100,100);
34. // Draw the data to the specified position coordinates on the drawing board
35. context.putImageData(imgData,10,260);
36. // Draw part of the pixel data to the drawing board
37. context.putImageData(imgData,200,260,50,50,100,100);
38.                                            
// createImageData Create pixels
var
40. imgData = context.getImageData(50,50,200,200);
// Create an empty object of specified size
var
42. imgData01 = context.createImageData(imgData);
                                                 
43. for (
i
44. = 0; i imgData01.width * imgData01.height * 4; i =4) { // Red pixels
45. imgData01.data[i 0] = 255;
46. imgData01.data[i 1] = 0;
47. imgData01.data[i 2] = 0;
48. imgData01.data[i 3] = 255;
49.                                             
                                                                     
50. context.putImageData(imgData01, 10, 260);
51. }  
52. }