当前位置： 移动技术网 > IT编程>网页制作>Html5 > HTML5canvas元素概念及使用方法介绍

HTML5canvas元素概念及使用方法介绍

2018年09月25日  | 移动技术网IT编程  | 我要评论

一万次伤心,网王 淡淡的味道,撑天拄地

一. canvas简介

??canvas是html5新增的元素，主要用于图形的绘制。canvas本身没有绘图能力，一切都是通过javascript来完成的。

二. canvas使用

在html中添加canvas元素，定义canvas元素的高宽 

在javascript代码中获取canvas元素对象

var canvas = document.getelementbyid("canv");

调用该对象的getcontext(“2d”)方法获取上下文

var context = canvas.getcontext("2d");

使用上下文对象在canvas上绘制图形。绘制图形的方法在下一部分介绍

三. 绘制图形的方法

绘制直线

context.moveto(x, y);    // 定义直线的起点
context.lineto(x, y);     // 定义直线的终点
context.stroke();   // 绘制直线

绘制扇形（圆也可以认为是扇形）

context.arc(originx, originy, r, startrad, stoprad);   // 定义扇形（包括圆心坐标，半径以及开始绘制和结束绘制的弧度）
context.stroke();      // 绘制扇形

绘制矩形

context.fillrect(x, y, width, height);     // 绘制矩形,(x,y)表示矩形左上角顶点的坐标

绘制文本

context.filltext(text, x, y);     // 绘制文本,(x, y)表示文本左下角的坐标

绘制图像

var img = document.getelementbyid("testimage");    // 获取图像元素对象
context.drawimage(img, x, y);    // 绘制图像，(x, y)表示图像左上角坐标


四. 上下文对象的属性

fillstyle

?用来定义绘制样式。可以在绘制直线，扇形，矩形和文本时使用。取值可以时颜色，渐变或图案，默认是颜色#000000。

context.fillstyle = "red";     // 设置绘制样式为红色
context.fillrect(x, y, width, height);     // 此时矩形是红色的


??? fillstyle的取值可以是渐变。创建渐变的代码如下：


var grd = context.createlineargradient(x, y, x1, y1);  // 创建线性渐变
grd.addcolorstop(0, "red");      // 设置渐变起始颜色为红色
grd.addcolorstop(0, "blue");      // 设置渐变结束颜色为蓝色

var grd = context.createradialgradient(x, y, r, x1, y1, r1);  // 创建径向渐变
grd.addcolorstop(0, "red");      // 设置渐变起始颜色为红色
grd.addcolorstop(0, "blue");      // 设置渐变结束颜色为蓝色


font

? 用来定义绘制文本时的使用字体。

context.font = "幼圆";    // 使用幼圆字体
context.filltext(text, x, y);      // 使用幼圆字体绘制文本



                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
                        点击进行留言回复
                    

                

                 
                

                    
相关文章:

                    
                

               
                       
                             

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网