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. oracle记录各登陆主机用户名,登陆ip,所执行的命令

    oracle记录各登陆主机用户名,登陆ip,所执行的命令 /etc/profile #history USER_IP=`>/dev/null| awk '{print $NF}'|sed -e ...

  2. ubuntu 下添加sublime text 启动图标

    ubuntu下无快捷方式一说,如果想快速打开sublime Text,可以创建sublime text 启动图标 1. 创建空白文档 sublime.desktop,注意权限 $ vi /usr/sh ...

  3. hdu 4753 Fishhead’s Little Game

    状态压缩dp解博弈问题(记忆化搜索).比赛的时候最后才开始做这道题,而且当时不知道为什么一直犯一些很2B的问题,导致没能ac,晚上看了看原先的代码,改了一下就MLE了...我原先是开的dp[1 < ...

  4. EK中fromCharCode和parseInt的配合使用

    基于web的漏洞攻击的第一步一般是:在landing page中通过<script>标签下的JavaScript脚本引入一些恶意链接.这些脚本往往会採用各种各样的混淆.加密手法来躲避AV和 ...

  5. cropbox插件实现的头像裁剪效果

    html代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

  6. mysql binlog解析概要

    1,dump协议: 根据数据库的ip+port创建socket,如果创建成功,说明链接建立成功,接下来是使用dump协议订阅binlog 链接建立成功之后,服务端会主动向客户端发送如下问候信息gree ...

  7. adb server didn t ack failed to start daemon

    关掉Ecilpse,打开cmd命令行 1)cd到sdk的platform-tools目录下, 2)执行  adb kill-server  ,出现  server not runing 提示 3)执行 ...

  8. WebStorm11 注册码

    这个注册方法我也是在贴吧上看到的:http://tieba.baidu.com/p/4160766032 注册方法 注册时选择“License server”输入“http://15.idea.lan ...

  9. oracle操作语句

    Oracle中建立索引,会提高查询速度: create index 索引名 on 表名(列名); create index index_userid on tbl_detail(userid);如何找 ...

  10. javascript的调试

    1. 关于javascript的调试,最好将浏览器的脚本通知打开. 2. 最好设置为每次访问页面时检查.