您的位置：首页 > Web前端 > HTML5

HTML5之Canvas标签简要学习

2010-11-22 21:46 691 查看
HTML5 提供了画布（canvas）标签，通过与Javascript结合使用，可以在网页上绘制图像。Canvas是一个矩形区域，使用Javascript可以控制其每一个像素。本文将对canvas标签进行简要的学习。

　　1、canvas标签说明

canvas标签是一个矩形区域，它包含两个属性width和height，分别表示矩形区域的宽和高，这两个属性都是可选的，并且都可以通过css来设定，他们的默认值是300px和150px。canvas在网页中的形式如下：

view source

print?

1
<
canvas
id
=
"myCanvas"
width=”300” height=”200”
style
=
"border:1px solid #c3c3c3;"
>
2
Your browser does not support the canvas element.
3
</
canvas
>
解析：

为canvas设置id属性是便于Javascript调用；

第二行是当浏览器不支持canvas标签时，将显示这行文字。

　　2、检测浏览器支持

　　Canvas标签并没有得到目前所有浏览器的支持，因此在使用canvas绘图的时候，要先检测客户端浏览器是否支持。下面的示例将通过Javascript判断浏览器是否支持：

view source

print?

01
<
canvas
id
=
"myCanvas"
width=”300” height=”200”
style
=
"border:1px solid #c3c3c3;"
>
02
Your browser does not support the canvas element.
03
</
canvas
>
04
<
script
type
=
"text/javascript"
>
05
var myCanvas = document.getElementById("myCanvas");
06
if (!myCanvas.getContext)
07
{
08
alert("Your browser does not support the canvas element.");
09
}
10
else
11
{
12
// do something here
13
}
14
</
script
>
解析：

　　上面的Javascript代码通过判断getContext方法是否为空来判断浏览器是否支持canvas标签。

　　3、绘制线条和图案

在没有canvas之前，想要在网页上面绘制线条或图案，是非常麻烦且不兼容的。我曾在《js画直线》一文中转载了网络上常用的在IE和FF中绘制线条的方法，但如果想要这些方法通用，则是不可能的。但现在有了canvas标签，一切就变得简单了。

现在，你只需要在页面上添加canvas标签，并通过Javascript调用它的相应方法，就可以轻松的在页面上绘制线条和图案。

view source

print?

01
//绘制线条<
BR
><
canvas
 
id
=
"myCanvas"
  
style
=
"border:1px solid #c3c3c3;"
>
02
Your browser does not support the canvas element.
03
</
canvas
>
04
<
script
 
type
=
"text/javascript"
>
05
var myCanvas = document.getElementById("myCanvas");
06
if (!myCanvas.getContext)
07
{
08
alert("Your browser does not support the canvas element.");
09
}
10
else
11
{
12
var myContext = myCanvas.getContext("2d");
13
myContext.moveTo(200, 150);
14
myContext.lineTo(100, 100);
15
myContext.lineTo(200, 50);
16
myContext.strokeStyle = "#FF0000";
17
myContext.lineWidth = 4;
18
myContext.stroke();
19
}
20
</
script
>
解析：

　　显示在页面中放置了一个canvas标签，设定id、width、height等属性，并为这个标签设定边框。
　　在Javascript中检测浏览器是否支持
　　当浏览器支持的时候开始调用getContext方法获得绘图的上下文（这地方很像vc中的GDI绘图~~），目前只提供了2D上下文，将来还有可能支持OpenGL ES的3D上下文。
　　moveTo方法是将当前位置移动到指定的坐标
　　lineTo方法是向指定的左边绘制直线
　　strokeStyle 属性是指定线条的颜色，在本例子中指定为红色
　　lineWidth 属性设置线条的粗细，这里设置为4px
　　stroke方法则是将直线显示出来。貌似是之前只是规定了哪里有线条，并没有显示，当调用这个方法后，线条才可以显示。

view source

print?

01
//绘制图案<
BR
><
canvas
 
id
=
"myCanvas"
 
width
=
"300"
 
height
=
"200"
  
style
=
"border:1px solid #c3c3c3;"
>
02
Your browser does not support the canvas element.
03
</
canvas
>
04
<
script
 
type
=
"text/javascript"
>
05
var myCanvas = document.getElementById("myCanvas");
06
if (!myCanvas.getContext)
07
{
08
alert("Your browser does not support the canvas element.");
09
}
10
else
11
{
12
var myContext = myCanvas.getContext("2d");
13
myContext.fillStyle = "rgb(200,0,0)";
14
myContext.fillRect(10, 10, 55, 50);
15
myContext.fillStyle = "rgba(0, 0, 200, 0.5)";
16
myContext.fillRect(30, 30, 55, 50);
17
myContext.fillRect(100, 0, 150, 50);
18
myContext.strokeRect(100, 60, 150, 50);
19
myContext.clearRect(130, 10, 90, 30);
20
}
21
</
script
>
解析：

　　直接到fillStyle属性，之前的代码是相同的，不再赘言。
　　fillStyle属性设定了填充的颜色、透明度等，如果设置为"rgb(200,0,0)"，则表示一个颜色，不透明；如果设置　　为"rgba(0,0,200,0.5)"，则表示颜色为rgb(0,0,200)，透明度为50%，
　　fillRect方法是绘制一个矩形，这个矩形区域没有边框，只有填充色。这个方法有四个参数，前两个表示左上角的坐标位　置，第三个参数为长度，第四个参数为高度。
　　strokeRect方法绘制一个带边框的矩形。该方法的四个参数的解释同上。
　　clearRect方法是清除一个矩形区域，被清除的区域将没有任何线条。该方法的四个参数的解释同上。

　　4、绘制路径

路径是绘制自定义图形的好方法，在canvas中通过beginPath()方法开始绘制路径，这个时侯你就可以绘制直线、曲线等，绘制完成后调用fill()和stroke()完成填充和设置边框，通过closePath()方法结束路径的绘制。下面的例子讲演时如何绘制路径：

view source

print?

01
<
canvas
 
id
=
"myCanvas"
 
width
=
"300"
 
height
=
"200"
  
style
=
"border:1px solid #c3c3c3;"
>
02
Your browser does not support the canvas element.
03
</
canvas
>
04
<
script
 
type
=
"text/javascript"
>
05
var myCanvas = document.getElementById("myCanvas");
06
if (!myCanvas.getContext)
07
{
08
alert("Your browser does not support the canvas element.");
09
}
10
else
11
{
12
var myContext = myCanvas.getContext("2d");
13
myContext.fillStyle = '#0000ff';
14
myContext.strokeStyle = '#ff0000';
15
myContext.lineWidth = 2;
16
myContext.beginPath();
17
myContext.moveTo(30, 30);
18
myContext.lineTo(150, 30);
19
myContext.lineTo(150, 120);
20
myContext.lineTo(90, 100);
21
myContext.lineTo(120, 60);
22
myContext.lineTo(30, 30);
23
myContext.fill();
24
myContext.stroke();
25
myContext.closePath();
26
}
解析：

　　在获得渲染上下文后，设置了填充色、边框色和边框宽度。
　　调用beginPath()方法开始绘制路径
　　通过lineTo()方法绘制一个闭合的自定义图形
　　调用fill()方法进行填充
　　调用stroke()方法设置边框
　　调用closePath()方法结束路径的绘制
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航