HTML5 canvas画布详解（五）-H5教程-PHP中文网

首页

web前端

H5教程

HTML5 canvas画布详解（五）

黄舟

Mar 17, 2017 pm 03:50 PM

drawImage共提供了三个方法：

1.在画布上定位图像。

context.drawImage(img,x,y);

2.在画布上定位图像，并指定图像的宽度和高度。

context.drawImage(img,x,y,width,height);

3.裁切图像，并在画布上定位被裁切的部分。

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数	描述
img	规定要使用的图像、画布或视频。
sx	开始剪切图像的 x 坐标位置。
sy	开始剪切图像的 y 坐标位置。
swidth	被剪切图像的宽度。
sheight	被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	要绘制的图像的宽度。（伸展或缩小图像）
height	要绘制的图像的高度。（伸展或缩小图像）

下面代码包含了以上把图像绘制到canvas上的三种方法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>canvas绘图</title>
    <script>
    window.onload = function()
    {
        drawCanvas1();
        drawCanvas2();
        drawCanvas3();
    }
    //context.drawImage(img,x,y);
    function drawCanvas1()
    {
        var canvas = document.getElementById("myCanvas1");
        var context = canvas.getContext("2d");
        //将图片绘制到canvas上
        var img = new Image();
        img.src = "1.jpg";
        img.onload = function()
        {
            context.drawImage(img, 0, 0);
        };

        context.textAlign = "center";
        context.fillText("context.drawImage(img,x,y)画原图", 250, 350);
    }

    //context.drawImage(img,x,y,width,height);
    function drawCanvas2()
    {
        var canvas = document.getElementById("myCanvas2");
        var context = canvas.getContext("2d");
        //将图片绘制到canvas上
        var img = new Image();
        img.src = "1.jpg";
        img.onload = function()
        {
            context.drawImage(img, 0, 0, 500, 300);
        };

        context.textAlign = "center";
        context.fillText("context.drawImage(img,x,y,width,height)指定宽和高进行拉伸和缩放", 250, 350);
    }

    //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    function drawCanvas3()
    {
        var canvas = document.getElementById("myCanvas3");
        var context = canvas.getContext("2d");
        //将图片绘制到canvas上
        var img = new Image();
        img.src = "1.jpg";
        img.onload = function()
        { 
            context.drawImage(img, 200,100, 200, 200, 0, 0, 200, 200);
        };

        context.textAlign = "center";
        context.fillText("context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)", 250, 350);
        context.fillText("裁切图片的一部分绘制在画布上，并可进行缩放", 250, 370);
    }

    </script>
</head>
<body>
    <canvas id="myCanvas1" width="500" height="400" style="border:#F00 solid 1px">
        您的浏览器不支持canvas
    </canvas>
    <canvas id="myCanvas2" width="500" height="400" style="border:#F00 solid 1px">
        您的浏览器不支持canvas
    </canvas>
    <canvas id="myCanvas3" width="500" height="400" style="border:#F00 solid 1px">
        您的浏览器不支持canvas
    </canvas>
    <br />
</body>
</html>

效果如下：
这里写图片描述
第一幅：context.drawImage(img, 0, 0)为从画布(0,0)开始绘制，绘制图像原大小。
第二幅：context.drawImage(img, 0, 0, 500, 300)表示为从画布(0,0)开始绘制，并指定绘制图像的宽和高分别为500、300，因此原图会被拉伸或缩小。
第三幅：context.drawImage(img, 200,100, 200, 200, 0, 0, 200, 200);表示从图像的(200,100)位置开始裁切宽和高分别为200、200的部分，并放置在画布的(0,0)位置，并指定绘制图像的宽高分别为200、200。

以上是HTML5 canvas画布详解（五）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面，支持组件化开发。2.React通过虚拟DOM优化页面渲染，适合复杂应用。3.Webpack用于模块打包，优化资源加载。

HTML5的遗产：当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代码：可访问性和语义HTMLApr 09, 2025 am 12:05 AM

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构，提高SEO。2.ARIA属性如aria-label增强可访问性，辅助技术用户可顺利使用网页。

H5与HTML5相同吗？Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多数情况下是相同的，但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准，包含新标签和API。2."h5"通常是HTML5的简称，但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。

H5的功能是什么？Apr 07, 2025 am 12:10 AM

H5，即HTML5，是HTML的第五个版本，它为开发者提供了更强大的工具集，使得创建复杂的网页应用变得更加简单。H5的核心功能包括：1）元素允许在网页上绘制图形和动画；2）语义化标签如、等，使网页结构清晰，利于SEO优化；3）新API如GeolocationAPI，支持基于位置的服务；4）跨浏览器兼容性需要通过兼容性测试和Polyfill库来确保。

h5链接怎么做Apr 06, 2025 pm 12:39 PM

如何创建 H5 链接？确定链接目标：获取 H5 页面或应用程序的 URL。创建 HTML 锚点：使用 <a> 标记创建锚点并指定链接目标URL。设置链接属性（可选）：根据需要设置 target、title 和 onclick 属性。添加到网页：将 HTML 锚点代码添加到希望链接出现的网页中。

h5兼容问题怎么解决Apr 06, 2025 pm 12:36 PM

解决 H5 兼容问题的方法包括：使用响应式设计，允许网页根据屏幕尺寸调整布局。采用跨浏览器测试工具，在发布前测试兼容性。使用 Polyfill，为旧浏览器提供对新 API 的支持。遵循 Web 标准，使用有效的代码和最佳实践。使用 CSS 预处理器，简化 CSS 代码并提高可读性。优化图像，减小网页大小并加快加载速度。启用 HTTPS，确保网站的安全性。

See all articles