任何的知识体系,都是由小的知识体系构成,你要想成为高手
无法第一步就是把所有的琐碎的知识都搞定它!
写的多了,自然就会了,这也是为啥要写笔记,写笔记的过程本身就是复习的过程,你想写
它个几千篇笔记, 你要说你不会, 人家肯定也不相信!
canvas 画图片的
第一种,就是在画布的坐标上,直接将图片画到上面去,此时
假如图片大小超出了画布,图片也不缩放
/*3参数*/
/*图片对象*/
/*绘制在画布上的坐标 x y*/
//ctx.drawImage(image,100,100);
<script type="text/javascript">
window.onload = function(){
var mycanvas = document.getElementById('mycanvas')
var ctx = mycanvas.getContext('2d')
// 内存中先加载,然后当内存加载完毕时,再把内存中的数据填充到我们的 dom元素中,这样能够快速的去
// 反应,比如网易的图片
var img = new Image();
img.onload = function(){
alert('加载完毕')
// 将图片画到canvas上面上去!
ctx.drawImage(img,100,100);
}
img.src = "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1537549551&di=3f8d4d76679adcae225387f7d6b199aa&src=http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/h=800/sign=b49dc48f8718367ab28972dd1e728b68/9922720e0cf3d7ca7f0736d0f31fbe096a63a9a6.jpg";
}
</script>
<canvas id='mycanvas' width="500" height="500"></canvas>
显示效果:
虽然我截图比较Low ,凑合看吧
第二种画法!
// 将图片画到canvas上面上去!
// 从100,100 开始画,然后缩放到200,200
ctx.drawImage(img,100,100,200,200);
显示效果如下:
明显就能看出效果,这就是缩放的效果:
最后一种画法?
// 将图片画到canvas上面上去!
// 从100,100 开始画,然后缩放到200,200
ctx.drawImage(img,593,327,500,500,100,100,300,300);
从图片的593,327 坐标开始截图,截取 500,500 这么大
然后将截取的图片,从canvas 100,100开始画, 缩放 300,300 这么大!
显示效果如下:
原始图效果:
总共在canvas 画图片就这三种方法!
/*绘制图片的三种方式*/
/*3参数*/
/*图片对象*/
/*绘制在画布上的坐标 x y*/
//ctx.drawImage(image,100,100);
/*5个参数*/
/*图片对象*/
/*绘制在画布上的坐标 x y*/
/*是图片的大小 不是裁剪 是缩放*/
//ctx.drawImage(image,100,100,100,100);
/*9个参数*/
/*图片对象*/
/*图片上定位的坐标 x y */
/*在图片上截取多大的区域 w h*/
/*绘制在画布上的坐标 x y*/
/*是图片的大小 不是裁剪 是缩放*/
ctx.drawImage(image,400,400,400,400,200,200,100,100);
行吧,这篇就结束了