码迷,mamicode.com
首页 > 其他好文 > 详细

context.drawImage绘制图片

时间:2015-08-12 06:40:35      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:

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绘制图片

标签:

原文地址:http://www.cnblogs.com/qiuzhimutou/p/4722879.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!