亲们好跟你们说一下，Canvas可是HTML5里边挺牛的一项技术。看起来像图片？其实不是的，它没src这个属性。Canvas就两个参数width和height，用DOM或CSS搞定设置问题，要是懒得填，默认是300像素和150像素。想用CSS调节画布大小？得留意了，画出来的图也会跟着变。所以，发现图形不对劲，别只依赖CSS，试试直接给canvas设width和height！
Canvas画板就跟图片一模一样，能设置边距、加边框、换背景之类的。但其实，这些都是表面功夫画上去的东西还是不会变滴！什么都不设置的话，画布就是透明的。不过注意，Canvas是新功能，有的老版浏览器可能用不了，比如Firefox1.0和IE。所以为了让他们也能用，得备个备用画面！
Canvas的替用内容
不用担心浏览器不理解Canvas，随手涂鸦点啥上去就好，比如写几个字、贴个图什么的。这样即使不懂Canvas的浏览器也能展示出你添加的内容，至少不会一片空白！
我们搞了个固定大小的画板，这样就可以随心所欲“换台”~现在，只支持2D画面，不过以后可能会有OpenGLES的3D效果喔~刚开始啥也没有，要想乱涂乱画，就要抓住那个叫”画板”的东西——渲染上下文，就在canvas元素对象里面找找看！然后就可以尽情挥洒你的创意！
获取渲染上下文
要想给网页上的画面添点颜色，就得学会Canvas这家伙的getContext方法。它只需要一个代表类型的值就能搞定。首先，用getElementById找到Canvas在哪儿，再用getContext把画图的环境拿到手。如果你的浏览器不支持Canvas，那就只能看到替代内容了。别担心，我们可以检查浏览器是否支持Canvas。方法超简单，看看getContext方法有没有定义就知道了。
搞定！找到我们要用的简单模板了。你有注意到？我加了个draw函数，网页一加载完，它就开始动起来（只需给body标签加个’onload’属性就行）。你想咋画随便你。这个函数就在画布上帮你画出你想要的样子。
Canvas的基本绘图操作
在Canvas里画东西可得找对办法！比如说要画个长方形，那就用fillRect这个函数，把左上角的x、y坐标，加上宽高搞定；要是想画个圆形，就用arc这个函数，告诉它圆心在哪儿、大小多少，以及开始和结束的角度就好。
知道canvas？它有俩好用的功能，能画渐变色和图案。渐变色就是线或圆的颜色变化；图案就是你想画什么画什么，都行！用它们就能玩转Canvas，还需要点编程知识哈。
Canvas的事件处理
Oh dear, your browser dosen't support HTML5! Tell you what, why don't you upgrade to a decent browser - you won't regret it!
Canvas虽然不直接管键盘，但是我们可以借助旁边的DOM（文档对象模型）节点操作来画画。比如，这儿有个mousedown、mousemove、mouseup啥的，都是帮助大家动手画画的好工具。而且，还特别兼容触摸屏的touchstart、touchemove、touchend这几个活动，让触控绘画也变得超简单！这么一搞，Canvas应用就变得更有意思了！
除了鼠标和触碰，我们还能监测键盘按键和启动定时器之类的动作！Canvas应用因此变得更有趣了。不过，这个得有编程基础才能实现，虽然有点难度，但是很值得尝试。
Canvas的性能优化
Canvas这个小神器，想要跑得快可是很关键！其实说白了，就是在浏览器里让JavaScript运行起来更给力罢了。怎么做？比如，避免多余的作画步骤，这样就能显著加速；再比如，使用requestAnimationFrame这个黑科技，你的动画效果必定会溜到飞起！
解决方法：把烦人的运算交给WebWorker在后台处理，这样你的主程序就能保持流畅，应用运行速度也更快了！但别被这WebWorker吓到了，其实只需花些时间掌握下编程技巧就能操作自如。
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
Canvas的应用场景
Canvas真的太好用了！想怎么画就怎么画，跟涂鸦似的，鼠标点点就行；也可以编个复杂点儿的游戏，比如马里奥那种，人人都爱玩；甚至拿来当数据可视化工具，让你一眼就看懂各种图，更直观地了解信息。
Canvas不止能建网站，手机和电脑上都能用！HTML5让它更给力！不过要玩转它还得有点技术才行。
Canvas前景真是诱人！现在HTML5可火了，画布自然更受欢迎。将来，画布说不定还能提供更多厉害的东西，比如说3D画图和物理引擎什么的。这样子，我们用起来是不是更有趣了？
说实话，现在浏览器技术很牛了，Canvas的速度肯定也会越来越快。再说以后还可能会有新的神器来帮助Canvas，比如硬件加速和WebAssembly什么的。这样一来，Canvas就能跑得更快更轻松！
Canvas真厉害大家都在关注它的动态。可是，想学好用，得先懂点儿编程才行！
var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
评论0