本文介绍了使用 HTML5 的 Canvas API 进行图片处理的方法，包括加载、调整大小、裁剪图片以及为图片添加阴影等操作。通过这些技术，开发者可以实现丰富的网页图像效果。
HTML5 Canvas 学习日志（八）
Canvas处理图片
加载图片
/* drawImage(image, x, y) image: image对象 x,y: 图片坐标 */var image = new Image();
image.src = "face.jpg";
$(image).load(function(){context.drawImage(image, 0, 0);
});
调整图片
/*调整图片 drawImage(image, x, y, width, height) image: 图片对象 x: x坐标 y: y坐标 width: 图片宽度 height: 图片高度 */$(image).load(function(){context.drawImage(image, 0, 0, 120, 120);
});
剪裁图片
/*裁剪图片 drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh); s:source（源）, d:destination（目标） image: 图片对象 sx: 源x坐标 sy: 源y坐标 sw: 源宽度 sh: 源高度 dx: 目标x坐标 dy: 目标y坐标 dw: 目标宽度 dh: 目标高度 */$(image).load(function(){context.drawImage(image, 0, 0, 120, 120, 0, 0, 120, 120);
});
给图片添加阴影
/*给图片添加阴影 tip: 某些浏览器可能不支持图片添加阴影 */context.shadowBlur = 20;
context.shadowColor = "rgb(225,225,225)";
$(image).load(function(){context.drawImage(image, 30, 30, 120, 120);
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
