canvas绘制图片详解
2017-03-10 22:14
483 查看
创建对象的方式
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//1、
var img1=document.createElement("img");
img1.src="../图片/beauty/55caf02db4861980.jpg!200x200.jpg";
document.body.appendChild(img1);
//2、
var img2=new Image();
img2.src="../图片/beauty/55caf02db4861980.jpg!200x200.jpg";
document.body.appendChild(img2);
</script>
将图片放在canvas画布上:drawImage方法(3个参数的使用)
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//1、准备图片对象
var img=new Image();
img.src="../图片/beauty/55caf02db4861980.jpg!200x200.jpg";
//2、将图片绘制到画布中-->在图片加载完成之后才能将它绘制到画布中
img.onload=function(){
//drawImage方法3个参数版本:
// 第一个参数表示图片对象
// 第2/3个参数表示图片的左上角顶点位于画布的坐标
ctx.drawImage(img,0,0);
}
</script>
将图片等比例放在canvas画布中:drawImage方法
(五个参数
)
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//1、准备图片对象
var img=new Image();
img.src="../图片/beauty/ChMkJlbKwhGIFzaNABRkaCE3DbUAALGiQJ0DzMAFGSA099.jpg";
//2、将图片绘制到画布中-->在图片加载完成之后才能将它绘制到画布中
img.onload=function(){
//将它等比例缩放在画布中,画布的宽度为500像素
//-->需要计算出图片位于画布中的高度
//-->公式:图片原始宽度/原始高度 = 画布宽度/画布高度
///---->推导出:画布高度=画布宽度/(图片原始宽度/原始高度)
var width=500;
var height=width/(img.width/img.height);
ctx.drawImage(img,0,0,width,height);
}
</script>
drawImage方法九个参数的调用
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img=new Image();
img.src="../图片/beauty/2016110204_670x419.jpg";
//图片中的矩形区域的顶点280,80
//矩形区域的宽高:60,60
img.onload=function(){
//drawImage 9个参数
//第一个参数:图片对象
//第2/3个参数:矩形区域的顶点坐标
//第4/5个参数:矩形区域的宽高
//第6/7个参数:矩形区域位于画布的顶点坐标
//第8/9个参数:矩形区域位于画布中的宽高
ctx.drawImage(img,280,80,60,60,300,300,60*5,60*5);
}
</script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//1、
var img1=document.createElement("img");
img1.src="../图片/beauty/55caf02db4861980.jpg!200x200.jpg";
document.body.appendChild(img1);
//2、
var img2=new Image();
img2.src="../图片/beauty/55caf02db4861980.jpg!200x200.jpg";
document.body.appendChild(img2);
</script>
将图片放在canvas画布上:drawImage方法(3个参数的使用)
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//1、准备图片对象
var img=new Image();
img.src="../图片/beauty/55caf02db4861980.jpg!200x200.jpg";
//2、将图片绘制到画布中-->在图片加载完成之后才能将它绘制到画布中
img.onload=function(){
//drawImage方法3个参数版本:
// 第一个参数表示图片对象
// 第2/3个参数表示图片的左上角顶点位于画布的坐标
ctx.drawImage(img,0,0);
}
</script>
将图片等比例放在canvas画布中:drawImage方法
(五个参数
)
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//1、准备图片对象
var img=new Image();
img.src="../图片/beauty/ChMkJlbKwhGIFzaNABRkaCE3DbUAALGiQJ0DzMAFGSA099.jpg";
//2、将图片绘制到画布中-->在图片加载完成之后才能将它绘制到画布中
img.onload=function(){
//将它等比例缩放在画布中,画布的宽度为500像素
//-->需要计算出图片位于画布中的高度
//-->公式:图片原始宽度/原始高度 = 画布宽度/画布高度
///---->推导出:画布高度=画布宽度/(图片原始宽度/原始高度)
var width=500;
var height=width/(img.width/img.height);
ctx.drawImage(img,0,0,width,height);
}
</script>
drawImage方法九个参数的调用
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img=new Image();
img.src="../图片/beauty/2016110204_670x419.jpg";
//图片中的矩形区域的顶点280,80
//矩形区域的宽高:60,60
img.onload=function(){
//drawImage 9个参数
//第一个参数:图片对象
//第2/3个参数:矩形区域的顶点坐标
//第4/5个参数:矩形区域的宽高
//第6/7个参数:矩形区域位于画布的顶点坐标
//第8/9个参数:矩形区域位于画布中的宽高
ctx.drawImage(img,280,80,60,60,300,300,60*5,60*5);
}
</script>
相关文章推荐
- HTML5 canvas 9绘制图片实例详解
- HTML5 canvas 9绘制图片实例详解
- Android中View(视图)绘制不同状态背景图片原理深入分析以及StateListDrawable使用详解
- [javascript] <完全开源,开心分享> HTML5 Canvas 在线图片处理《imageMagic》(single page app)开发详解[1]
- 用canvas实现图片滤镜效果详解之视频效果
- Android中View(视图)绘制不同状态背景图片原理深入分析以及StateListDrawable使用详解
- Android Canvas绘制图片层叠处理方式porterduff xfermode
- android中Canvas使用drawBitmap绘制图片
- android中Canvas使用drawBitmap绘制图片
- 用canvas实现图片滤镜效果详解之灰度效果
- 用canvas实现图片滤镜效果详解之灰度效果
- Android中View(视图)绘制不同状态背景图片原理深入分析以及StateListDrawable使用详解
- Android中View绘制不同状态背景图片原理深入分析以及StateListDrawable使用详解
- 基于HTML5 Canvas:字符串,路径,背景,图片的详解
- Android中View(视图)绘制不同状态背景图片原理深入分析以及StateListDrawable使用详解
- 用canvas实现图片滤镜效果详解之灰度效果
- Android中View(视图)绘制不同状态背景图片原理深入分析以及StateListDrawable使用详解
- android中使用Canvas绘制指定位置和宽高度的图片
- HTML5 移动开发 ------ Canvas 9.3 绘制图片
- 用canvas实现图片滤镜效果详解之视频效果