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.     //创建新的图片对象        var img = new Image();   
6.     //指定图片的URL        img.src = "http://www.365mini.com/image/google_logo.png";   
7.     //浏览器加载图片完毕后再绘制图片        img.onload = function(){   
8.         //以Canvas画布上的坐标(10,10)为起始点，绘制图像            //图像的宽度和高度分别缩放到350px和100px   
9.         ctx.drawImage(img, 10, 10, 350, 100);                     };   
10. }    </script>  

我们将Google的logo图像进行缩放后，此时就可以在canvas中看到整个图像了：