理解Canvas图片加载
在Canvas里放图其实挺容易滴，只需用到几个简单的指令就能搞定。不过，跟文字或者图形不太一样，图片加载起来麻烦点，所以得等它加载完才能画上去！浏览器经常是偷偷摸摸地加载图片的，要是在它还没加载完的时候就去画，Canvas就啥都看不见了。所以咱们写代码的时候要记得先等等，等到图片加载完了再动手哈~
使用回调确保图片加载完毕
别急要等图都载入好再来展示！这就得靠下个环节—回调函数了。只到所有的图像加载完以后才能继续往下走，这样子就不会有加载没成功的麻烦。
function drawBeauty(beauty){
var mycv = document.getElementById("cv");
var myctx = mycv.getContext("2d");
myctx.drawImage(beauty, 0, 0);
}
function load(){
var beauty = new Image();
beauty.src = "http://images.cnblogs.com/cnblogs_com/html5test/359114/r_test.jpg";
if(beauty.complete){
drawBeauty(beauty);
}else{
beauty.onload = function(){
drawBeauty(beauty);
};
beauty.onerror = function(){
window.alert('美女加载失败，请重试');
};
};
}//load
if (document.all) {
window.attachEvent('onload', load);
}else {
window.addEventListener('load', load, false);
}
基本绘画操作
搞定图像的绘画，关键就在于告诉它你想放到哪儿去（用x、y轴表示）呗。得注意了，这可是以图像左上角为参照点。在Canvas这个大家庭里，你可以随心所欲地按比例画出任何你想要的图案。
缩放及调整尺寸
如果你想更改图片大小，那就试试重载过的drawImage函数！把想要的宽度和高度写进去就能搞定~调整和缩放图片就是这么简单。
图像裁剪
drawImage(image, x, y) var canvas = document.getElementById(‘myCanvas’); var ctx = canvas.getContext(’2d’); ctx.drawImage(myImage, 50, 50); ctx.drawImage(myImage, 125, 125); ctx.drawImage(myImage, 210, 210);
要说裁剪图片，就是用drawImage这个办法，把原图里你想要的那块儿，涂到Canvas画布的指定位置就成了。虽然这个方法麻烦点，需要搞懂好几个参数，但是你只要知道它的作用，就跟剪刀加胶水差不多，两头拼起来就行！
旋转与翻转
不光能缩小放大图片，你还可以试试转动或倒过来看看！用Canvas的API方法就能完成，想要怎么转都行~这样搞怪的展示方式肯定让人眼前一亮！
透明度处理
透明度处理是我们做视觉特效常见的手法。在Canvas里头，你能通过调整globalAlpha这个属性来操控Canvas上所有画出来的东西的透明程度，这样就能做出那种淡进淡出的效果。
drawImage(image, x, y, width, height)
滤镜效果应用
Canvas里的滤镜功能让你的图像更有艺术范儿或者特效感！用它调整下globalCompositeOperation属性，然后试试那些滤镜函数，比如模糊啊、深褐色之类的，瞬间就让你的图片变得更酷炫了。
var canvas = document.getElementById(‘myCanvas’); var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage, 50, 50, 100, 100); ctx.drawImage(myImage, 125, 125, 200, 50); ctx.drawImage(myImage, 210, 210, 500, 500);
动画效果实现
Canvas加上JavaScript就能做出各种炫酷的动画了，像是页面上的颜色渐变啊、移动啊、旋转之类的都能做出来。这样子用户看起来也会觉得特别有意思！
响应式设计与互动性
要想用Canvas展示出好图，别忘了照顾下它的响应式设计和互动性。我们可以根据不同设备屏幕大小来自动调整Canvas的大小，还得加上点交互事件处理的功能，这样用户才能跟展示的图玩起来。
了解了HTML5Canvas加载图片跟操作的技巧后，就能玩转图片、给观众带来更精彩的画面！CanvasAPI就是我们的工具箱，用好了它，视觉效果就会变得更炫酷！
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)
评论0