HTML画布基础

3814

在本文中，我们将了解 HTML画布基础 通过实例说明了它们的实现。

null

HTML“canvas”元素用于通过JavaScript绘制图形。“canvas”元素只是图形的容器。必须使用JavaScript来实际绘制图形。Canvas有几种用于绘制路径、框、圆、文本和添加图像的方法。画布将是HTML页面上的矩形区域。默认情况下，画布没有边框，也没有内容。

语法： 

<canvas>    Content...</canvas>

建议使用id属性（在脚本中引用）和width和height属性来定义画布的大小。要添加边框，请使用“样式”属性。

支持的属性： 颜色、样式、阴影、线条样式、矩形、路径、变换、文本、像素操作、合成和图像绘制等属性是所有画布标记支持的全局属性。请参阅 HTML画布完整参考 详细内容请参阅本文。

例1： 这个例子演示了如何在HTML中使用带有线性渐变和笔划样式文本的画布。

HTML

< html >
< body >
< canvas id = "gfg"
width = "300px"
height = "100px"
style = "border:1px solid #d3d3d3;" >
</ canvas >
< script >
var g = document.getElementById("gfg");
var geeks = g.getContext("2d");
var gradient = geeks.createLinearGradient(1, 4, g.width, 2);
gradient.addColorStop("0", "green");
gradient.addColorStop("0.4", "yellow");
gradient.addColorStop("1.0", "aqua");
geeks.font = "40px sans-serif";
geeks.fillStyle = "red";
geeks.strokeStyle = gradient;
geeks.strokeText("GeeksforGeeks", 10, 60);
</ script >
</ body >
</ html > 





               












     输出：   


  图片[1]-HTML画布基础-yiteyi-C++库  


   带有线性渐变的HTML画布  




     例2：    下面的代码演示了空画布。 




   HTML  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


                         <                                     html                                     >                       


           


                         <                                     body                                     >                       


                                                 <                                     canvas                                     id                                     =                                     "myCanvas"                       


                                                 width                                     =                                     "400"                       


                                                 height                                     =                                     "200"                       


                                                 style                                     =                                     "border:2px solid #000000;"                                     >                       


                                                 </                                     canvas                                     >                       


                         </                                     body                                     >                       


           


                         </                                     html                                     >                       












    






               






               












     输出：   


  图片[2]-HTML画布基础-yiteyi-C++库  


   空画布  




  可以使用画布绘制各种形状，如下所述。 


     例1：    本例显示了绘制圆圈的HTML画布。 




   HTML  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


                         <                                     html                                     >                       


           


                         <                                     body                                     >                       


                                                 <                                     canvas                                     id                                     =                                     "GFG"                       


                                                 width                                     =                                     "400"                       


                                                 height                                     =                                     "200"                       


                                                 style                                     =                                     "border:2px solid #d3d3d3;"                                     >                       


                                                 </                                     canvas                                     >                       


                                                 <                                     script                                     >                       


                                                 var g = document.getElementById("GFG ");                       


                                                 var geeks = g.getContext("2d ");                       


                                                 geeks.beginPath();                       


                                                 geeks.arc(200, 100, 50, 0, 2 * Math.PI);                       


                                                 geeks.stroke();                       


                                                 </                                     script                                     >                       


                         </                                     body                                     >                       


           


                         </                                     html                                     >                       












    






               






               












     输出：   


  图片[3]-HTML画布基础-yiteyi-C++库  


   用HTML画布绘制圆圈  




     例2：    在本例中，我们将使用HTML画布编写文本。 




   HTML  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


                         <                                     html                                     >                       


           


                         <                                     body                                     >                       


                                                 <                                     canvas                                     id                                     =                                     "GFG"                       


                                                 width                                     =                                     "600"                       


                                                 height                                     =                                     "200"                       


                                                 style                                     =                                     "border:1px solid #d3d3d3;"                                     >                       


                                                 </                                     canvas                                     >                       


                                                 <                                     script                                     >                       


                                                 var g = document.getElementById("GFG");                       


                                                 var geeks = g.getContext("2d");                       


                                                 geeks.font = "30px Arial";                       


                                                 geeks.fillText("GeeksForGeeks", 170, 50);                       


                                                 </                                     script                                     >                       


                         </                                     body                                     >                       


           


                         </                                     html                                     >                       












    






               






               












     输出：   


  图片[4]-HTML画布基础-yiteyi-C++库  


   使用HTML画布编写文本  




     例3：    此示例演示了在HTML画布中使用线性渐变属性。 




   HTML  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


                         <                                     html                                     >                       


           


                         <                                     body                                     >                       


                                                 <                                     canvas                                     id                                     =                                     "GFG"                       


                                                 width                                     =                                     "400"                       


                                                 height                                     =                                     "200"                       


                                                 style                                     =                                     "border:2px solid #d3d3d3;"                                     >                       


                                                 </                                     canvas                                     >                       


                                                 <                                     script                                     >                       


                                                 var G = document.getElementById("GFG");                       


                                                 var geeks = G.getContext("2d");                       


                                                 var grd = geeks.createLinearGradient(0, 0, 200, 0);                       


                                                 grd.addColorStop(0, "yellow");                       


                                                 grd.addColorStop(1, "grey");                       


                                                 geeks.fillStyle = grd;                       


                                                 geeks.fillRect(50, 50, 300, 80);                       


                                                 </                                     script                                     >                       


                         </                                     body                                     >                       


           


                         </                                     html                                     >                       












    






               






               












     输出：   


  图片[5]-HTML画布基础-yiteyi-C++库  


   带线性渐变的HTML画布  




     例4：    在本例中，我们将使用     标记绘制图像。   




   HTML  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


                         <                                     html                                     >                       


           


                         <                                     body                                     >                       


                                   


                         <                                     p                                     >Image to use:</                                     p                                     >                       


           


                                   


                                                 <                                     img                                     id                                     =                                     "image"                       


                                                 src                                     =                       


                         "                           https://media.geeksforgeeks.org/wp-content/uploads/20210916184234/gfg3-300x300.png                          "                       


                                                 alt                                     =                                     "GeeksforGeeks logo"                       


                                                 width                                     =                                     "250"                       


                                                 height                                     =                                     "200"                                     >                       


                                   


                         <                                     p                                     >Canvas to fill:</                                     p                                     >                       


           


           


                                                 <                                     canvas                                     id                                     =                                     "gfg"                       


                                                 width                                     =                                     "300"                       


                                                 height                                     =                                     "300"                       


                                                 style                                     =                                     "border:1px solid #d3d3d3; "                                     >                       


                                                 </                                     canvas                                     >                       


                                   


                         <                                     p                                     >                       


                                                 <                                     button                                     onclick                                     =                                     "gfg()"                                     >Click to Try</                                     button                                     >                       


                                                 </                                     p                                     >                       


           


           


                                                 <                                     script                                     >                       


                                                 function gfg() {                       


                                                 var g = document.getElementById("gfg");                       


                                                 var geeks = g.getContext("2d");                       


                                                 var img = document.getElementById("image");                       


                                                 geeks.drawImage(img, 0, 0);                       


                                                 }                       


                                                 </                                     script                                     >                       


                         </                                     body                                     >                       


           


                         </                                     html                                     >                       












    






               






               












     输出：   


  图片[6]-HTML画布基础-yiteyi-C++库  


   使用       标记绘制图像     




     例5：    本例演示了在HTML画布中使用阴影模糊属性。 




   HTML  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


                         <                                     html                                     >                       


                         <                                     body                                     >                       


                                                 <                                     canvas                                     id                                     =                                     "GFG"                       


                                                 width                                     =                                     "500"                       


                                                 height                                     =                                     "250"                                     ;>                       


                                                 </                                     canvas                                     >                       


                                                 <                                     script                                     >                       


                                                 var g = document.getElementById("GFG");                       


                                                 var geeks = g.getContext("2d");                       


                                                 geeks.shadowBlur = 20;                       


                                                 geeks.shadowColor = "yellow";                       


                                                 geeks.fillStyle = "red";                       


                                                 geeks.fillRect(30, 20, 100, 80);                       


                                                 </                                     script                                     >                       


                         </                                     body                                     >                       


                         </                                     html                                     >                       












    






               






               












     输出：   


  图片[7]-HTML画布基础-yiteyi-C++库  


   具有阴影模糊属性的HTML画布  




     例6：    在本例中，我们将在HTML画布中使用rotate（）方法。 




   HTML  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


                         <                                     html                                     >                       


                         <                                     body                                     >                       


                                                 <                                     canvas                                     id                                     =                                     "GFG"                       


                                                 width                                     =                                     "300"                       


                                                 height                                     =                                     "150;"                                     >                       


                                                 </                                     canvas                                     >                       


                                                 <                                     script                                     >                       


                                                 var g = document.getElementById("GFG");                       


                                                 var geeks = g.getContext("2d");                       


                                                 geeks.rotate(20 * Math.PI / 180);                       


                                                 geeks.fillRect(100, 20, 100, 50);                       


                                                 </                                     script                                     >                       


                         </                                     body                                     >                       


                         </                                     html                                     >                       












    






               






               












     输出：   


  图片[8]-HTML画布基础-yiteyi-C++库  


   带有rotate（）方法的HTML画布  




     例7：    在本例中，我们使用translate（）方法在画布上重新映射（0,0）位置。 




   HTML  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


                         <                                     html                                     >                       


                         <                                     body                                     >                       


                                                 <                                     canvas                                     id                                     =                                     "GFG"                       


                                                 width                                     =                                     "300"                       


                                                 height                                     =                                     "150;"                                     >                       


                                                 </                                     canvas                                     >                       


                                                 <                                     script                                     >                       


                                                 var g = document.getElementById("GFG");                       


                                                 var geeks = g.getContext("2d");                       


                                                 geeks.fillRect(10, 10, 100, 50);                       


                                                 geeks.translate(80, 90);                       


                                                 geeks.fillRect(10, 10, 100, 50);                       


                                                 </                                     script                                     >                       


                         </                                     body                                     >                       


                         </                                     html                                     >                       












    






               






               












     输出：   


  图片[9]-HTML画布基础-yiteyi-C++库  


   带translate（）方法的HTML画布  




     例8：    此示例演示了transform（）方法在HTML画布中的使用。 




   HTML  












                        


        


                                                     


        


                          


        


                                                                                






















                         <!DOCTYPE html>                       


                         <                                     html                                     >                       


                         <                                     body                                     >                       


                                                 <                                     canvas                                     id                                     =                                     "GFG"                       


                                                 width                                     =                                     "300"                       


                                                 height                                     =                                     "150;"                                     >                       


                                                 </                                     canvas                                     >                       


                                                 <                                     script                                     >                       


                                                 var g = document.getElementById("GFG");                       


                                                 var geeks = g.getContext("2d");                       


                                                 geeks.fillStyle = "yellow";                       


                                                 geeks.fillRect(0, 0, 250, 100)                       


                                                 geeks.transform(1, 0.5, -0.5, 1, 30, 10);                       


                                                 geeks.fillStyle = "grey";                       


                                                 geeks.fillRect(0, 0, 250, 100);                       


                                                 geeks.transform(1, 0.5, -0.5, 1, 30, 10);                       


                                                 geeks.fillStyle = "black";                       


                                                 geeks.fillRect(0, 0, 250, 100);                       


                                                 </                                     script                                     >                       


                         </                                     body                                     >                       


                         </                                     html                                     >                       












    






               






               












     输出：   


  图片[10]-HTML画布基础-yiteyi-C++库  


   HTML画布与transform（）方法  




     在HTML画布中创建动画：    JavaScript有助于在HTML5画布上模拟良好的动画。两种重要的JavaScript方法可用于在画布上设置图像动画： 


    

  1.             setInterval（回调，时间）：          此方法在给定时间后重复执行提供的代码。  
    2. 

  2.             setTimeout（回调，时间）：          此方法在给定时间后只执行一次提供的代码。  
    3. 



     支持的浏览器：   


    

  •    谷歌Chrome93.0  
    • 

  •    微软Edge 93.0  
    • 

  •    IE 11.0  
    • 

  •    火狐92.0  
    • 

  •    歌剧78.0  
    • 

  •    狩猎14.1  
    • 



 


                    

        
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
Html
    

    
喜欢就支持一下吧
点赞14
        分享

        

            

                
                
CPPKU的头像-yiteyi-C++库

                
            

            
VS调试报错：f:\dd\vctools\vc7libs\ship\atlmfc\src\occcont.cpp line:925的原因-yiteyi-C++库
VS调试报错：f:\dd\vctools\vc7libs\ship\atlmfc\src\occcont.cpp line:925的原因
VS调试报错：f:\dd\vctools\vc7libs\ship\atlmfc\src\occcont.cpp li...
8年前 2.6W+
关于”PostgreSQL错误：关系[表]不存在“问题的原因和解决方案-yiteyi-C++库
关于”PostgreSQL错误：关系[表]不存在“问题的原因和解决方案
关于”PostgreSQL错误：关系[表]不存在“问题的原因和解决方案
7年前 9287
Easylogging++入门教程（三）Easylogging++ 配置-yiteyi-C++库
Easylogging++入门教程（三）Easylogging++ 配置
Easylogging++入门教程（三）Easylogging++ 配置
9年前 9052
常见的小波基函数有哪些？如何选择合适的小波基函数？-yiteyi-C++库
常见的小波基函数有哪些？如何选择合适的小波基函数？
常见的小波基函数有哪些？如何选择合适的小波基函数？
8年前 8484
TiXmlDocument变量LoadFile()加载XML文档失败的原因有哪些？-yiteyi-C++库
TiXmlDocument变量LoadFile()加载XML文档失败的原因有哪些？
TiXmlDocument变量LoadFile()加载XML文档失败的原因有哪些？
10年前 6675
Easylogging++入门教程（一）Easylogging++日志库简介-yiteyi-C++库
Easylogging++入门教程（一）Easylogging++日志库简介
Easylogging++入门教程（一）Easylogging++日志库简介
9年前 6608

        

    
    

        
    



            

                
相关推荐

            
什么是index.html？如何创建和使用index.html？-yiteyi-C++库
什么是index.html？如何创建和使用index.html？
什么是index.html？如何创建和使用index.html？
4年前 405
“HTTP 404找不到”错误代码及解决方案-yiteyi-C++库
“HTTP 404找不到”错误代码及解决方案
“HTTP 404找不到”错误代码及解决方案
4年前 188
编程中的源代码是什么？-yiteyi-C++库
编程中的源代码是什么？
编程中的源代码是什么？
4年前 143
HTML和Word中的项目符号类型和创建-yiteyi-C++库
HTML和Word中的项目符号类型和创建
HTML和Word中的项目符号类型和创建
4年前 136
如何在HTML中用CSS改变字体颜色？-yiteyi-C++库
如何在HTML中用CSS改变字体颜色？
如何在HTML中用CSS改变字体颜色？
4年前 133
如何定义Html表？-yiteyi-C++库
如何定义Html表？
如何定义Html表？
4年前 127