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. EasyUI选项卡tab页面处理示例

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. JIRA项目跟踪管理工具简介与安装

    1.什么是JIRA JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域. Atlassian2002年 ...

  3. Codeforces #245(div2)

    A:A. Points and Segments (easy) 题目看了n久,開始认为尼玛这是div2的题目么,题目还标明了easy.. 意思是给你一n个点,m个区间,在n个点上放蓝球或者红球,然后让 ...

  4. 【floyed】【HDU1217】【Arbitrage】

    题目大意: 给你几种货币,以及几种汇率关系,问是否存在套利的可能? 思路: 初步想法:图上存在一个环的路径上权值相乘大于1.... 再者:该如何找到图上所有环呢.... 好吧 经过鸟神 和 况神的指点 ...

  5. springmvc jstl

    springmvc运用maven的jetty插件运行成功,部署在tomcat6报错:ClassNotFoundException: javax.servlet.jsp.jstl.core.Config ...

  6. Angular-UI-Router

      原文  http://www.cnblogs.com/youngdze/p/4025538.html 主题 路由器JavaScript 路由 Route 为什么用 Route AJAX 请求不会留 ...

  7. SQL Server 死锁检查

    示例代码 select spid, blocked, status, hostname, program_name, hostprocess, cmd from sysprocesses -- kil ...

  8. c# 读取IntPtr 中的数据

    c++的写法是这样的:LRESULT CPictureQueryDlg::OnQueryPicNty(WPARAM wp, LPARAM lp){EnableWindow(TRUE); BYTE *p ...

  9. excel文件后台代码

    很多情况下,我们都需要从Excel中获取数据来创建Word报表文档.首先在Excel中分析数据,然后将分析结果导出到Word文档中发布.技术实现方式:1.创建Word模板,用来作为数据分析结果发布平台 ...

  10. JSC学习笔记：JavaScriptCore 初识

    JSContext/JSValue JSContext是运行JavaScript的上下文环境,是一个全局环境实例:类似于浏览器端的window对象,表示浏览器的窗口:在浏览器中,所有JavaScrip ...