HTML5 Canvas绘制文本及图片的基础教程

1. <script type="text/javascript">    //获取Canvas对象(画布)   
2. var canvas = document.getElementById("myCanvas");    //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   
3. if(canvas.getContext){          //获取对应的CanvasRenderingContext2D对象(画笔)   
4.     var ctx = canvas.getContext("2d");           
5.     //设置字体样式        ctx.font = "30px Courier New";   
6.     //设置字体颜色        ctx.strokeStyle = "blue";   
7.     //从坐标点(50,50)开始绘制文字        ctx.strokeText("CodePlayer+中文测试", 50, 50);   
8. }    </script>  

我们再次使用浏览器访问页面，将会看到如下显示效果(效果图片中的"CodePlayer"字样其实也是空心的，只是由于字体较小导致两侧看起来重叠在了一起)：

绘制图片
在html5中，除了利用canvas绘制矢量图形之外，我们还可以在canvas「画布」上绘制现有的图像文件。

首先，我们来看看使用canvas绘制图像文件需要用到CanvasRenderingContext2D对象的哪些主要属性和方法：