context.drawImage(img,x,y)  x,y图像起始坐标

context.drawImage(img,x,y,w,h) w,h指定图像的宽度和高度

context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) s被复制区域  d复制后

理解了其实挺简单的！就是不知道用用到多少？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEEEf";
context.fillRect(0,0,500,500);
image = new Image();
image.src = "图片地址"；
image.onload = function(){}
}
function drawImage(context,image){
context.drawImage(image,100,100);
context.draeImage(image,270,270,380,380,230,230,240,240);
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

context.drawImage绘制图片的更多相关文章

  1. Canvas中 drawImage绘制图片不显示

    在学习 html5中的 Canvas.drawImage时写了如下代码: <!doctype html> <html> <head><title>研究& ...

  2. 软件项目技术点(8)—— canvas调用drawImage绘制图片

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本 ...

  3. canvas使用context.drawImage时图片不在画布上展示的问题

    遇到问题:找到图片img元素后,将参数传给context.drawImage(image,10,10)后图片并没有在画布上展示. 解决方案:在外层嵌套document.images[0].onload ...

  4. C# 解决DrawImage绘制图片拉伸产生渐变

    ImageAttributes ImgAtt = new ImageAttributes(); ;                 ImgAtt.SetWrapMode(System.Drawing. ...

  5. Canvas 中drawImage 绘制不出图片

    在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...

  6. canvas绘制图片drawImage学习

    不得不说,html5中的canvas真的非常强大,从图片处理,到视频处理,再到游戏开发,都能见到canvas的身影,然而,就这一个<canvas>标签,功能居然如此强大,这主要归功于can ...

  7. canvas - drawImage()方法绘制图片不显示的问题

    canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等.   问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...

  8. html5 绘制图片 drawImage

    要在绘图上下文中绘制图片,可以使用 drawImage 方法.该方法有三种不同的参数: drawImage(image,dx,dy) drawImage(image,dx,dy,dw,dh) d ...

  9. 在canvas上面绘制图片--drawImage实例

    在canvas上面绘制图片--drawImage实例 关键点: 1.图片居中 2.其它 <!DOCTYPE html> <html lang="zh-cn"> ...

随机推荐

  1. 数据挖掘之分类算法---knn算法(有matlab例子)

    knn算法(k-Nearest Neighbor algorithm).是一种经典的分类算法.注意,不是聚类算法.所以这种分类算法 必然包括了训练过程. 然而和一般性的分类算法不同,knn算法是一种懒 ...

  2. 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个

    自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...

  3. MVC折线图应用

    后台 获取值并转换成json数据存到实体里面,然后前台输出 HighchartsModels model = new HighchartsModels(); model.DataDicJson = J ...

  4. caffe源代码分析--data_layer.cpp

    dataLayer作为整个网络的输入层, 数据从leveldb中取. leveldb的数据是通过图片转换过来的. 网络建立的时候. datalayer主要是负责设置一些參数,比方batchsize.c ...

  5. UIPageViewController-浅析

    一.UIPageViewController概念   控件为我们提供了一种像翻书效果的一种控件.我们可以通过使用UIPageViewController控件,来完成类似图书一样的翻页控制方式.   二 ...

  6. 动态的 css——less

    less 是一种样式语言,它将 css 赋予了动态语言的特性,如变量. 继承. 运算. 函数.less 既可以在客户端上运行(支持 ie6+,webkit,firefox),也可以借助 Node.js ...

  7. mysql数据库的物理文件结构

    mysql两种常用存储引擎myisam和innodb myisam不支持事务:innodb支持事务,当前作为插件来安装 myisam的数据库的物理文件结构为: .frm文件:与表相关的元数据信息都存放 ...

  8. SQL Server数据恢复——日志备份

    太坑了,我把数据给删了 “大坑啊,数据被我误删了.”从事数据库相关工作的过程中,我想应该很多人会有过和我一样的遭遇吧?尤其是在进行update或者delete操作的时候,忘记了where条件.这些毁灭 ...

  9. oracle12c及PLSQL Developer安装全程记录

    一.登陆oracle下载页面  http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html 下 ...

  10. spring+hibernate

    添加注解时spring是添加在set方法上而hibernate是添加在get方法上 事务应该加在service层上,而不是加在dao层上,如果加在dao层上回滚的时候只能回滚一个dao的实现. 事务处 ...