使用html5 canvas绘制图片

最新推荐文章于 2024-04-20 16:29:18 发布

我是要成为H5的男人

最新推荐文章于 2024-04-20 16:29:18 发布

阅读量1.1k

点赞数

分类专栏： HTML5 文章标签： javascript photoshop ViewUI

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

注意：本文属于《html5 Canvas绘制图形入门详解》系列文章中的一部分。如果你是html5初学者，仅仅阅读本文，可能无法较深入的理解canvas，甚至无法顺畅地通读本文。请点击上述链接以了解使用html5 canvas绘制图形的完整内容。

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

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

drawImage(mixed image, int x, int y)

以canvas上指定的坐标点开始，按照图像的原始尺寸大小绘制整个图像。这里的 image可以是 Image对象，也可以是 Canvas对象(下同)。

drawImage(mixed image, int x, int y, int width, int height)

以canvas上指定的坐标点开始，以指定的大小( width和 height)绘制整个图像，图像将根据指定的尺寸自动进行相应的缩放。

drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)

将指定图像的局部图像(以 (imageX, imageY)为左上角、宽度为 imageWidth、高度为 imageHeight的矩形部分)绘制到canvas中以 (canvasX,canvasY)为左上角坐标、宽度为 canvasWidth、高度为 canvasHeight的矩形区域中

是的，你没有看错。要在canvas中绘制图像，我们可以使用一个名为drawImage()的方法，不过该方法具有三种不同的变体，每个方法变体允许接收的参数不仅数量不同，连参数的含义也不尽相同。

在这里，我们对上述三个变体分别举例说明。

首先，我们使用drawImage()的第一个变体在canvas上绘制Google的logo图片(原始尺寸为550 x 190)。

 
 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas绘制图像入门示例</title>
</head>
<body>

<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持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>

对应的显示效果如下：

使用canvas绘制Google的logo图像

由于Google的Logo图像过大，超过了canvas的尺寸范围，因此只能显示出图像的一部分。此时，我们使用第2个变体将Google的logo图像缩小到指定的宽度和高度，并绘制到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)为起始点，绘制图像
        //图像的宽度和高度分别缩放到350px和100px
        ctx.drawImage(img, 10, 10, 350, 100);             
    };
}
</script>

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

canvas-draw-image-2.png

最后，我们使用第三个方法变体将Google logo中的"Goo"部分图像绘制到canvas中("Goo"部分的图像大小可以使用Photoshop等工具测量得出，这里直接使用测量后的结果)。

 
 <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(){
        /*
         * 将图像左侧的"Goo"部分(即以坐标(0,0)为左上角坐标、宽度为332px、高度为190px的部分图像)
         * 绘制到canvas中以坐标(10,10)为左上角、宽度为332px、高度为190px的矩形区域
         *
         * canvas绘制图像的目标区域的宽度和高度与截取的部分图像尺寸保持一致，
         * 就表示不进行缩放，以原始尺寸截取部分图像
         */        
        ctx.drawImage(img, 0, 0, 332, 190, 10, 10, 332, 190);             
    };
}
</script>

此时，我们就可以看到canvas中显示的"Goo"局部图像了：

使用canvas绘制Google logo的
转载自：
http://www.365mini.com/page/canvas-draw-image.htm

我是要成为H5的男人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
使用html5 canvas绘制图片

注意：本文属于《html5 Canvas绘制图形入门详解》系列文章中的一部分。如果你是html5初学者，仅仅阅读本文，可能无法较深入的理解canvas，甚至无法顺畅地通读本文。请点击上述链接以了解使用html5 canvas绘制图形的完整内容。在html5中，除了利用canvas绘制矢量图形之外，我们还可以在canvas「画布」上绘制现有的图像文件。首先，我们来看看使用canv
复制链接

扫一扫