11.33. HTML5 Canvas

发布时间 ： 2025-10-25 13:33:09 UTC      

Page Views: 9 views

Tags define graphics, such as charts and other images, which you must draw using scripts.

Draw a red rectangle, a gradient rectangle, a colored rectangle, and some colored text on the canvas (Canvas).

Your browser does not support HTML5 element。

11.33.1. What is canvas?

HTML5 elements are used for drawing graphics, which are done through scripts (usually JavaScript).

labels are just graphics containers, and you must use scripts to draw graphics.

You can use it in a variety of ways canvas draw paths, boxes, circles, characters, and add images.

11.33.2. Browser support

The numbers in the table indicate support. the first browser version number of the element.

element

< canvas >

4.0

9.0

2.0

3.1

9.0

11.33.3. Create a canvas

A canvas is a rectangular frame on a web page, through the elements to draw.

Note: by default the element has no borders and content.

a simple example is as follows: 

<canvas id="myCanvas" width="200" height="100">canvas>    
 Note: tags usually need to specify an id attribute (often referenced in scripts)   width   and   height   the size of the canvas defined by the. 
 
 Tip: you can use more than one in the HTML page      element。  
 Use   style   property to add a border: 
 
 
 Example  
 
 
 
<canvasid="myCanvas"width="200"height="100"style="border:1px solid #000000;"> 
 
 
 
  
 
  11.33.4.  Use JavaScript to draw an image  
 
   canvas   the element itself does not have the ability to draw. All drawing work must be done within JavaScript: 
 
 
 Example  
 
 
 
varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75); 
 
 
 
 Instance resolution: 
 
 First, find      elements:  
 
 
var c=document.getElementById("myCanvas"); 
 
 
 
 Then, create the   context   object: 
 
 
 
var ctx=c.getContext("2d"); 
 
 
 
 The getContext (“2d”) object is a built-in HTML5 object with a variety of ways to draw paths, rectangles, circles, characters, and add images. 
 
 The following two lines of code draw a red rectangle: 
 
 
 
ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); 
 
 
 
 Set up   fillStyle   properties can be CSS colors, gradients, or patterns.   fillStyle   the default setting is # 000000 (black). 
 
   fillRect(x,y,width,height)   method defines the current filling method of the rectangle. 
   
 
  11.33.5.  Canvas coordinates  
 
   canvas   is a two-dimensional grid. 
 
   canvas   The coordinates of the upper-left corner of the   (0,0)   
 
   fillRect   method has parameters   (0,0,150,75)   . 
 
 Draw a rectangle of 150x75 on the canvas, starting at the upper left corner   (0,0)   . 
 
 Coordinate instance 
 
 As shown in the following figure, the X and Y coordinates of the canvas are used to position the painting on the canvas. The positioning coordinates are displayed on the rectangular box moved by the mouse. 
 
 
 
  11.33.6.  Canvas-path  
 
 In   Canvas   to draw lines, we will use the following two methods: 
 
     
  •  
       moveTo(   x,y)   define line start coordinates 
     
    •  
  •  
       lineTo(   x,y)   define line end coordinates 
     
    •  
 
 We have to use the method of “ink” to draw lines, like   stroke()   . 
 
 
 Example  
 
 Define start coordinates   (0,0)   , and end coordinates   (200,100)   . And then use the   stroke()   method to draw lines: 
 
 Your browser does not support HTML5      element. JavaScript:  
 
 
varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.moveTo(0,0);ctx.lineTo(200,100);ctx.stroke(); 
 
 
 
 In   canvas   to draw a circle in, we will use the following methods: 
 
 
 
arc(x,y,r,start,stop) 
 
 
 
 In fact, we use the “ink” method when drawing circles, such as   stroke()   or   fill()   . 
  
 
 Example  
 
 Use   arc()   method to draw a circle: 
 
 Your browser does not support HTML5      element. JavaScript:  
 
 
varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2\*Math.PI);ctx.stroke(); 
 
 
   
 
  11.33.7.  Canvas-text  
 
 Using canvas to draw text, the important properties and methods are as follows: 
 
     
  •  
       font   -define fonts 
     
    •  
  •  
       fillText(   text,x,y)   -in   canvas   draw solid text on the 
     
    •  
  •  
       strokeText(   text,x,y)   -in   canvas   draw hollow text on the 
     
    •  
 
 Use   fillText()   : 
 
 
 Example  
 
 Use the “Arial” font to draw a high-30px text (solid) on the canvas: 
 
 Your browser does not support HTML5      element. JavaScript:  
 
 
varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.font="30px Arial";ctx.fillText("Hello World",10,50); 
 
 
 
 Use   strokeText()   : 
  
 
 Example  
 
 Use the “Arial” font to draw a high-30px text (void) on the canvas: 
 
 Your browser does not support HTML5      element. JavaScript:  
 
 
varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.font="30px Arial";ctx.strokeText("Hello World",10,50); 
 
 
   
 
  11.33.8.  Canvas-gradient  
 
 Gradients can be filled in rectangles, circles, lines, text, etc., and various shapes can define different colors. 
 
 There are two different ways to set Canvas gradients: 
 
     
  •  
       createLinearGradient(   x,y,x1,y1)   -create a line gradient 
     
    •  
  •  
       createRadialGradient(   x,y,r,x1,y1,r1)   -create a radial / circular gradient 
     
    •  
 
 When we use a gradient object, we must use two or more stop colors. 
 
   addColorStop()   the method specifies the color stop, and the parameters are described by coordinates, which can be 0 to 1. 
 
 Using gradients, settin   fillStyle   or   strokeStyle   is a gradient, and then draw a shape such as a rectangle, text, or a line. 
 
 Use   createLinearGradient()   : 
 
 
 Example  
 
 Create a linear gradient. Fill the rectangle with a gradient: 
 
 Your browser does not support HTML5      element. JavaScript:  
 
 
varc=document.getElementById("myCanvas");varctx=c.getContext("2d"); //Create gradient vargrd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop (0,"red");grd.addColorStop(1,"white");//Fill gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); 
 
 
 
 Use   createRadialGradient()   
  
 
 Example  
 
 Create a radial / circular gradient. Fill the rectangle with a gradient: 
 
 Your browser does not support HTML5      element. JavaScript:  
 
 
varc=document.getElementById("myCanvas");varctx=c.getContext("2d"); //Create gradient vargrd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red");grd.addColorStop(1,"white"); //Fill gradient ctx.fillStyle=grd;ctx.fillRect(10,10,150,80); 
 
 
   
 
  11.33.9.  Canvas-Ima  
 
 To place an image on the canvas, use the following methods: 
 
     
  •  
       drawImage(   image,x,y)   
     
    •  
 
 
 Work with images:  
 
 Image0 
 
 
 
 Example  
 
 Place an image on the canvas: 
 
 Your browser does not support HTML5      element. JavaScript:  
 
 
varc=document.getElementById("myCanvas");varctx=c.getContext("2d"); varimg=document.getElementById("scream");ctx.drawImage(img,10,10); 
 
 
   
 
  11.33.10.  HTML Canvas reference manual  
 
 The complete attributes of the tag can be found in the Canvas reference manual. 
 
 
 
  11.33.11.  HTML < canvas > tag  
 
      
  
 Tag 
 		  
 Description 
 		 
   
  
 < canvas > 
 		  
 The canvas element of HTML5 uses JavaScript to draw images on a web page. 
 		 
  
 
 For more information, it is enough to learn the article HTML5 Canvas. 
 
  
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            11.33. HTML5 Canvas 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289