HTML&JS 笔记(3)
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<canvas id="myCanvas" width="500" height="500">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var image=new Image();
image.src="pic1.jpg";
image.onload=function(){
ctx.drawImage(image,10,10,180,180);
//x,y,w,h
var myimg=ctx.getImageData(50,50,100,100);
//绘制图片部分的定位坐标值，绘制图片的起始位置，宽度和高度值
ctx.putImageData(myimg,20,260,30,30,100,100);
};
</script>
</body>
</html
本博客所有内容是原创，如果转载请注明来源
http://blog.csdn.net/myhaspl/
下面是显示文字
下面使用scale缩放
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<canvas id="myCanvas" width="500" height="500">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var image=new Image();
image.src="pic1.jpg";
image.onload=function(){
ctx.scale(1.5,0.5);
ctx.drawImage(image,10,10,180,180);
//x,y,w,h
//绘制图片部分的定位坐标值，绘制图片的起始位置，宽度和高度值
};
</script>
</body>
</html
通过transform变换矩阵
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<canvas id="myCanvas" width="500" height="500">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var image=new Image();
image.src="pic1.jpg";
image.onload=function(){
ctx.transform(3,0,0,3,0,0);
ctx.drawImage(image,10,10,180,180);
//x,y,w,h
//绘制图片部分的定位坐标值，绘制图片的起始位置，宽度和高度值
};
</script>
</body>
</html
