HTML5 绘制线条和图案

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

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方法则是将直线显示出来。貌似是之前只是规定了哪里有线条，并没有显示，当调用这个方法后，线条才可以显示。

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方法是清除一个矩形区域，被清除的区域将没有任何线条。该方法的四个参数的解释同上。