简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> H5 Tutorial> body text

HTML5 Canvas API中drawImage()方法的使用实例_html5教程技巧

WBOY
Release： 2016-05-16 15:52:02
Original
1706 people have browsed it

drawImage()是一个很关键的方法，它可以引入图像、画布、视频，并对其进行缩放或裁剪。

一共有三种表现形式：

语法 1

JavaScript Code 复制内容到剪贴板
  1. context.drawImage(img,dx,dy);

语法 2

JavaScript Code 复制内容到剪贴板
  1. context.drawImage(img,dx,dy,dw,dw);

语法 3

JavaScript Code 复制内容到剪贴板
  1. context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);

来看一下坐标草图：
2016325103525710.png (360×360)

PS: 不要在样式中定义 的宽和高，否则，里面所画的图片会自动放大或者缩小。
三参数的是标准形式，可用于加载图像、画布或视频；五参数的除了可以加载图像还可以对图像进行指定宽高的缩放；九参数的除了缩放，还可以裁剪。各参数意义见下表。

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

下面，我们加载一个图片试试。

JavaScript Code 复制内容到剪贴板
  1. nbsp;html>
  2. "zh">
  4. "UTF-8">
  5. drawImage()
  7. body { background: url("./images/bg3.jpg") repeat; }
  8. #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
  12. "canvas-warp" >
  13. "canvas" >
  14. 你的浏览器居然不支持Canvas？！赶快换一个吧！！
  • window.onload =function(){
  • varcanvas = document.getElementById("canvas");
  • canvas.width = 800;
  • canvas.height = 600;
  • varcontext = canvas.getContext("2d");
  • context.fillStyle ="#FFF";
  • context.fillRect(0,0,800,600);
  • varimg =newImage();
  • img.src ="./images/20-1.jpg";
  • img.onload =function(){
  • context.drawImage(img,200,50);
  • }
  • };

    • 运行结果：
    2016325103645161.jpg (850×500)

    创建相框：
    这里，我们结合clip()和drawImage()以及三次贝塞尔曲线bezierCurveTo()，来为上面一个案例，加上一个心形的相框~

    JavaScript Code 复制内容到剪贴板
    1. nbsp;html>
    2. "zh">
    4. "UTF-8">
    5. 绘制心形相框
    7. body { background: url("./images/bg3.jpg") repeat; }
    8. #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
    12. "canvas-warp" >
    13. "canvas" >
    14. 你的浏览器居然不支持Canvas？！赶快换一个吧！！
  • window.onload =function(){
  • varcanvas = document.getElementById("canvas");
  • canvas.width = 800;
  • canvas.height = 600;
  • varcontext = canvas.getContext("2d");
  • context.fillStyle ="#FFF";
  • context.fillRect(0,0,800,600);
  • context.beginPath();
  • context.moveTo(400,260);
  • context.bezierCurveTo(450,220,450,300,400,315);
  • context.bezierCurveTo(350,300,350,220,400,260);
  • context.clip();
  • context.closePath();
  • varimg =newImage();
  • img.src ="./images/20-1.jpg";
  • img.onload =function(){
  • context.drawImage(img,348,240,100,100);
  • }
  • };

    • 运行结果：
    2016325103713253.jpg (300×286)

    是不是美美的？好啦，至此最关键的遮罩和图像裁剪以及说完了，其实在java.awt中，drawImage()也是一个至关重要的方法。有人说制作Java游戏界面，只要会用drawImage()就可以一招打遍天下~在Canvas里也是一样的。美工提供的素材基本都是图片，这个时候drawImage()对图片的处理就很重要了。即使基本功，也是对图片最重要的处理方法。

    Related labels：
    canvas html5
    source：php.cn
    Previous article：使用HTML5 Canvas API中的clip()方法裁剪区域图像_html5教程技巧 Next article：深入研究HTML5实现图片压缩上传功能_html5教程技巧
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    How to set HTML5's required attribute using Javascript? I'm trying to mark a text input box as required in Javascript.
    From 2023-10-13 08:52:25
    0
    2
    317
    Problem with not getting accurate mouse coordinates: using HTML5 canvas when resizing the page I want to create this pixel effect from a front-end expert. Although I can achieve the ent...
    From 2023-09-12 12:20:33
    0
    1
    280
    HTML5 video M3U8 encoded with Base64 I want to add a base64 encoded M3U8 file in the Video tag of HTML5, how can I do it
    From 2023-09-09 23:07:18
    0
    1
    247
    vue.js/bootstrap: onclick event method not called, error "Variable not found: updateDocument" I'm new to front-end development but have basic understanding of HTML5, CSS and Javascript...
    From 2023-09-09 20:06:48
    0
    1
    362
    Remove closing slash '/' from image tag in XHTML I have a string txt1 that stores an image. Its value is in XHTML format, i.e. the element ...
    From 2023-09-06 12:15:38
    0
    1
    240
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！