drawImage

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>img</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='400'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var cxt = c.getContext('2d');

    var img = new Image();

    img.src = 'face.jpg';

    img.onload = function() {

        // 从10,10坐标开始绘制整个图片

        cxt.drawImage(img, 10, 10);

        // 从260,10开始把图片绘制到100x100的矩形区域内

        cxt.drawImage(img, 260, 10, 100, 100);

        // 截取图片50,50到100,100的区域，从260,130开始，绘制到100x100区域内

        cxt.drawImage(img, 50, 50, 100, 100, 260, 130, 100, 100);

    };

    </script>

</body>

</html>

Canvas drawImage API的更多相关文章

  1. Html5 学习系列（五）Canvas绘图API快速入门（2）

    Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...

  2. HTML5之canvas基本API介绍及应用 1

    一.canvas的API: 1.颜色.样式和阴影: 2.线条样式属性和方法: 3.路径方法: 4.转换方法: 5.文本属性和方法: 6.像素操作方法和属性: 7.其他: drawImage:向画布上绘 ...

  3. javascript canvas全部API

    HTMLCanvasElement//canvas elem对象 属性 height//高 width//宽 方法 getContext()//获取<canvas>相关的可绘制的上下文 t ...

  4. canvas绘图API详解

    canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...

  5. Html5 学习系列（五）Canvas绘图API快速入门（1）

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  6. 引言：Canvas绘图API快速入门

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  7. Canvas createRadialGradient API

    Canvas createRadialGradient API <!DOCTYPE html> <html lang="en"> <head> ...

  8. Canvas原生API(纯CPU)计算并渲染三维图

    Canvas原生API(纯CPU)计算并渲染三维图 前端工程师学图形学:Games101 第三次作业 利用Canvas画三维中的三角形并使用超采样实现抗锯齿 最终完成功能 Canvas 原生API实现 ...

  9. Canvas的API整理

    canvas元素 可被用来通过脚本(通常是JavaScript)绘制图形.比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果.你可以(也应该)在元素标签内写入可提供替代的的代码内容,这些内 ...

随机推荐

  1. mysql 赋给用户权限 grant all privileges on

    遇到了 SQLException: access denied for  @'localhost' (using password: no) 解决办法   grant all privileges o ...

  2. Allegro pcb -等长设计

    1.首先注意打开的Allegro PCB是哪个产品控件,如下图,若打开的是Allegro PCB Designer,在后面,看别人的讲解过程中会找不到“SiXplorer”,原因 就是出在这里,All ...

  3. webapp之路--之必备知识

    移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决 ...

  4. avi格式详细介绍

    百度:http://wenku.baidu.com/link?url=KB7qKc6UG4aeU-i9FtXeV8Uou4JHPceiyz3HNbzCrQw4phY-qRlcp3tTSwYPeIgdx ...

  5. [iOS Animation]-CALayer 图像IO

    图像IO 潜伏期值得思考 - 凯文 帕萨特 在第13章“高效绘图”中,我们研究了和Core Graphics绘图相关的性能问题,以及如何修复.和绘图性能相关紧密相关的是图像性能.在这一章中,我们将研究 ...

  6. laravel memcached使用

    当第一次使用cache时,想用 memcached 的方式,但是它直接报错: 说明你的php没安装 memcached 这个扩展,在ubuntu下直接 sudo apt-get install mem ...

  7. vs生成解决方案错误无法将文件“xx.*”复制到xx.*”。对路径“bin\xx.*”的访问被拒绝

    使用vs2008生成解决方案时出现的问题: 无法将文件“obj\xx.*”复制到“bin\xx.*”.对路径“bin\xx.*”的访问被拒绝 解决方法: 将*.dll的只读属性去掉(在windows对 ...

  8. el5,6,7的ntpdate服务

    在el5里没有ntpdate服务 在el6里有ntpdate服务 在el7里有ntpdate服务

  9. coding菜鸟养成记

    http://www.cnblogs.com/xdp-gacl/category/563690.html http://www.cnblogs.com/vincent-blog/p/4402327.h ...

  10. Servlet添加

    index .jsp <body> <h1>第一个Servlet</h1> <hr> <a href = "servlet/Hellos ...