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

您的浏览器不支持canvas标签。   
</canvas>   
  
<script type="text/javascript">   
//获取Canvas对象(画布)   
var canvas = document.getElementById("myCanvas");   
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   
if(canvas.getContext){     
    //获取对应的CanvasRenderingContext2D对象(画笔)   
    var ctx = canvas.getContext("2d");   
       
    //创建新的图片对象   
    var img = new Image();   
    //指定图片的URL   
    img.src = "http://www.365mini.com/image/google_logo.png";   
    //浏览器加载图片完毕后再绘制图片   
    img.onload = function(){   
        //以Canvas画布上的坐标(10,10)为起始点，绘制图像   
        ctx.drawImage(img, 10, 10);                
    };   
}   
</script>   
</body>   
</html>  

对应的显示效果如下：

由于Google的Logo图像过大，超过了canvas的尺寸范围，因此只能显示出图像的一部分。此时，我们使用第2个变体将Google的logo图像缩小到指定的宽度和高度，并绘制到canvas中。

JavaScript Code复制内容到剪贴板

<script type="text/javascript">   
//获取Canvas对象(画布)   
var canvas = document.getElementById("myCanvas");   
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   
if(canvas.getContext){     
    //获取对应的CanvasRenderingContext2D对象(画笔)   
    var ctx = canvas.getContext("2d");   
       
    //创建新的图片对象   
    var img = new Image();   
    //指定图片的URL