HTML&JS 笔记(3)

来源：互联网发布：网络文字顶格编辑：程序博客网时间：2024/05/29 03:18

<!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,hvar myimg=ctx.getImageData(50,50,100,100);//绘制图片部分的定位坐标值，绘制图片的起始位置，宽度和高度值ctx.putImageData(myimg,20,260,30,30,100,100);};</script></body></html

本博客所有内容是原创，如果转载请注明来源

http://blog.csdn.net/myhaspl/

canvas绘图片代码如上

下面是显示文字

下面使用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

1 0