步骤
  • 1
  • 2
  • 3
  • 4
  • 5
 

简介

是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。

工具/原料

  • html

  • script

步骤/方法

  1. 最常见的在canvas上画图的方法是使用Image对象。所支持的来源图片格式依赖于浏览器的支持,然而,一些典型的图片格式(png,jpg,gif等)基本上都没有问题。

  2. 在下面的所有例子中,图片源将会使用这张256×256尺寸的图片。

  3. 绘制图片:在最基本的画图操作中,你需要的只是希望图像出现处的位置(x和y坐标)。图像的位置是相对于其左上角来判断的。使用这种方法,图像可以简单的以其原尺寸被画在画布上。

  4. 代码如下

    var myImage=document.getElementByIdx_x("myCanvas");

    var cxt=myImage.getContext("2d");

    var img=new Image();

    img.src="tu0.jpg";

    cxt.drawImage(img,50,50);

    cxt.drawImage(img,125,125);

    cxt.drawImage(img,210,210);

  5. 根据所写代码生成网页效果

  6.  
  7. 图片变形:改变图像的尺寸,你需要使用重载的drawImage函数,提供给它希望的宽度和高度参数。

  8. 代码如下

    var myImage=document.getElementByIdx_x("myCanvas");

    var cxt=myImage.getContext("2d");

    var img=new Image();

    img.src="tu0.jpg";

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

    cxt.drawImage(img,125,125,200,50);

    cxt.drawImage(img,210,210,500,500);

  9. 这个例子演示了如何画一个比原图小的图像,一个不同长宽比的图像和一个比原图大的图像的方法。

  10. 图片裁剪:drawImage方法的功用是对图像进行裁剪。drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)

  11. 参数很多,但基本上你可以把它想成从原图中取出一个矩形区域,然后把它画到画布上目标区域里。

  12. 代码如下

    var myImage=document.getElementByIdx_x("myCanvas");

    var cxt=myImage.getContext("2d");

    var img=new Image();

    img.src="tu0.jpg";

    cxt.drawImage(img,0,0,50,50,25,25,100,100);

    cxt.drawImage(img,125,125,100,100,125,125,150,150);

    cxt.drawImage(img,80,80,100,100,250,250,220,220);

  13. 根据代码生成网页效果

  14. 这些就是HTML5中的canvas(画布)标记里进行绘图和处理图像的基本操作。

注意事项

  • 最先在苹果公司(Apple)的Mac OS X Dashboard上被引入,而后被应用于Safari。基于Gecko1.8的浏览器,例如Firefox 1.5,也支持这个新元素。元素是WhatWG Web applications 1.0也就是大家都知道的HTML 5标准规范的一部分。

  • IE浏览器暂不支持。

HTML5 Canvas绘图详解 drawImage() 方法 有图有真相!的更多相关文章

  1. 【转】Android Canvas绘图详解(图文)

    转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Canvas绘图详解(图文) 泡 ...

  2. Android Canvas绘图详解(图文)

    编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! Andr ...

  3. 【转】Android Canvas绘图详解

    转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android中使用图形处理引擎,2D部分是an ...

  4. 【HTML5】Canvas绘图详解-1

    ----->Canvas绘制基础 1,线条绘制 1-1,线条组成的图形和beginPath 案例:绘制由不同颜色的线条组成的图案 1-2,多边形的填充和closePath 案例:绘制封闭具有填充 ...

  5. canvas绘图详解笔记之线条及线条属性

    创建 canvas 首先创建一个canvas元素,我们只需要在html文件中加入这么一句代码: <canvas id="canvas">当前浏览器不支持canvas,请 ...

  6. canvas绘图详解-06-绘制一个五角星-常用绘图原理

    先将如何画一个正规的五角星 在五角星的内外画两个圆,五角星有五个角,360/5=72度 所以得出这两个角的度数 然后算出这两个点坐标 角度转弧度 角度/180*Math.PI 所以外顶点坐标 x:   ...

  7. HTML5 Canvas绘图如何使用

    --------------复制而来--原地址http://jingyan.baidu.com/article/ed15cb1b2e642a1be369813e.html HTML5 Canvas绘图 ...

  8. iOS 2D绘图详解(Quartz 2D)之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)

    前言:一个路径可以包含由一个或者多个shape以及子路径subpath,quartz提供了很多方便的shape可以直接调用.例如:point,line,Arc(圆弧),Curves(曲线),Ellip ...

  9. [一]class 文件浅析 .class文件格式详解 字段方法属性常量池字段 class文件属性表 数据类型 数据结构

    前言概述  本文旨在讲解class文件的整体结构信息,阅读本文后应该可以完整的了解class文件的格式以及各个部分的逻辑组成含义   class文件包含了java虚拟机指令集 和  符号表   以及若 ...

随机推荐

  1. 自定义数据类型写入SequenceFile并读出

    开头对这边博客的内容做个概述,首先是定义了一个DoubleArrayWritable的类,用于存放矩阵的列向量,然后将其作为value写入SequenceFile中,key就是对应的矩阵的列号,最后( ...

  2. Scala高手实战****第18课:Scala偏函数、异常、Lazy值编码实战及Spark源码鉴赏

    本篇文章主要讲述Scala函数式编程之偏函数,异常,及Lazy 第一部分:偏函数 偏函数:当函数有多个参数,而在使用该函数时不想提供所有参数(比如函数有3个参数),只提供0~2个参数,此时得到的函数便 ...

  3. 微信开发之自定义菜单--weixin-java-tools

    一.前言 平时在开发微信的过程中,肯定会设计到微信的相关菜单的使用,这次就和大家介绍下如何使用weixin-java-tools来管理菜单 二.自定义菜单分类 1.click:点击推事件用户点击cli ...

  4. Java几种常见的四舍五入的方法

    /* * 在上面简单地介绍了银行家舍入法,目前java支持7中舍入法: 1. ROUND_UP:远离零方向舍入.向绝对值最大的方向舍入,只要舍弃位非0即进位. 2. ROUND_DOWN:趋向零方向舍 ...

  5. 通过API获取 Portus+registry docker仓库信息

    接口获取docker centos 镜像的 tag 列表脚本 # -*- encoding:utf-8 -*- import requests import json ""&quo ...

  6. python函数getopt用法

    python内建模块,用来处理命令行参数 格式:getopt(args, shortopts, longopts = []) 参数args一般是sys.argv[1:]sys.argv[0]表示执行文 ...

  7. phpmyadmin后台4种拿shell方法 && php爆路径大法

    php后台拿shell要知道php的路径,文章下面将讲诉爆php路径的方法!!! 方法一: CREATE TABLE `mysql`.`xss` (`xss1` TEXT NOT NULL ); IN ...

  8. jquery怎样获得父级窗体的大小

    方法例如以下: $(window.parent.window).width() 注意: window能够省略.如:$(parent).width(),parent能够有多级,比方:$(parent.p ...

  9. POJ Cow Exhibition

    题目链接:Click Here~ 题目意思自己看吧. 算法分析: 对我来想是没有想到,最后看别人的博客才知道的.要把当中的一个条件当作体积.由于两个条件都存在负数,所以还要先保证最后不会再体积中出现负 ...

  10. DriverStore文件夹特别大,能删除吗?

    DriverStore文件夹特别大,能删除吗? DriverStore\FileRepository文件夹特别大,能删除吗? C:\Windows\System32\DriverStore\FileR ...