HTML5 Canvas画布

<canvas>标签定义图形，比如图表和其他图像，你必须用脚本来绘制图形。

在画布上（ Canvas ）画一个共红色矩形，渐变矩形，彩色矩形，和一些彩色文字。

什么是 Canvas？

HTML5<canvas>元素用于图形绘制，通过脚本（通常是 Javascript）来完成。

<canvas>标签是图形容器，必须使用脚来绘制图形。

你可以通过很多方法使用canvas来绘制路径，盒，圆、字符以及图像。

创建一个画布（ Canvas ）

一个画布在网页中是一个矩形框通过 <canvas> 元素来绘制。

注意：默认情况下<canvas>元素没有边框内容

<canvas简单实例如下：

<canvas id="mycanva" width="200px" height="200px"></canvas>

注意：标签通常需要一个指定 id 属性（ 脚本中经常引用 ），width 和 height属性定义的画布的大小，也可以使用 style属性添加边框。

使用 Javascript 来绘制图像

canvas 元素本身是没绘图能力。所有的绘制工作必须在 Javascript 内完成

1.  
   var canvas = documnet.getElementById（"mycancas"）
2.  
    
3.  
   var ctx = canvas.getContext('2d')
4.  
    
5.  
   ctx.fillStyle = '#000000'
6.  
    
7.  
   // fillStyle ：属性是填充 CSS背景 渐变 默认是："#000000"
8.  
    
9.  
    
10.  
    ctx.fillRect(0,0,150，75)
11.  
     
12.  
    /*
13.  
    参数1：x坐标
14.  
    参数2：y坐标
15.  
    参数3：宽
16.  
    参数4：高
17.  
    */

canvas坐标

canvas是一个二维网格

canvas的左上角坐标为（0，0）

上面的 fillRect 方法拥有参数（0，0，，150，75）

意思是：在画布上绘制 150*75的图形，从左上角（0，0）开始

坐标实例

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。

 Canvas - 路径

在 canvas 上画线，我们可以使用这两种方法：

moveTo（x，y）定义线条开始坐标

lineTo（x，y）定义线条结束坐标

strock（）绘制线条的方法

1.  
   var canvvas = document.getElementById('mycanvas')
2.  
    
3.  
   var ctx = canvas.getContext('2d')
4.  
    
5.  
   //绘制坐标的起始位置 参数一：x轴 参数二：y轴
6.  
    
7.  
   ctx.moveTo(0,0)
8.  
    
9.  
   //绘制坐标的结束位置 参数一：x轴 参数二：y轴
10.  
     
11.  
    ctx.lineTo(200,100)
12.  
     
13.  
    //开始绘制图表
14.  
     
15.  
    ctx.stroke()

在 canvas 中绘制图形，我可以将方法以下方法：

arc(x,y,r,start,stop)

实际上我们可以 strke() 或者 fill()

使用 arc() 方法绘制一个圆:

1.  
   var canvas = documnet.getElementById('mycanvas')
2.  
    
3.  
   var ctx = canvas.getContext('2d')
4.  
    
5.  
   // 使用 beginPath() 开始绘画
6.  
    
7.  
   ctx.beginPath()
8.  
    
9.  
   // 使用 arc() 开始绘制
10.  
     
11.  
    ctx.arc(150,40,20,0,2*Math*PI)
12.  
     
13.  
    /*
14.  
    参数一：x轴的位置
15.  
    参数二：y轴的位置
16.  
    参数三：半径的位置
17.  
    参数四：圆的起始位置
18.  
    参数五：圆的结束位置
19.  
    */
20.  
     
21.  
    // 结束绘画
22.  
     
23.  
    ctx.stroke()

 Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

font - 定义字体

filltext( text,x,y )：在 canvas 上绘制实心的文本

sreokeText( text,x,y )：在 canvas 上绘制空心的文本

1.  
   // 绘制实心的文本
2.  
    
3.  
   var canvas = document.getElementById('mycanvas')
4.  
    
5.  
   var ctx = canvas.getContext('2d')
6.  
    
7.  
   // 字体大小为 30 px
8.  
    
9.  
   ctx.font = '30px Arial'
10.  
     
11.  
    ctx.fillText(' Eoklee ',15,50)
12.  
     
13.  
    /*
14.  
    fillText（）
15.  
    参数一：添加文字的内容
16.  
    参数二：x轴的位置
17.  
    参数三：y轴的位置
18.  
    */
19.  
     
20.  
    // 绘制空心的文本
21.  
     
22.  
    var canvas = document.getElementById('mycanvas')
23.  
     
24.  
    var ctx = canvas.getContext('2d')
25.  
     
26.  
    // 字体大小为 30 px
27.  
     
28.  
    ctx.font = '30px Arial'
29.  
     
30.  
    ctx.strokeText(' Eoklee ',15,50)
31.  
     
32.  
    /*
33.  
    strokeText（）
34.  
    参数一：添加文字的内容
35.  
    参数二：x轴的位置
36.  
    参数三：y轴的位置
37.  
    */-
38.  
     

这篇好文章是转载于：学新通技术网