Canvas就是HTML5新推出的酷炫玩意儿，可以用来画出各种各样的图像和图片！它就像块画布，只需要用JavaScript就能轻松创作出你脑海中的作品。想象一下，你也可以在网络上画出自己独一无二的画作了，是不是觉得很有趣、很自豪？
Canvas真的超赞，特别灵活！它可以轻松帮你搞动画、小游戏，甚至复杂的图形界面。而且，Canvas画起来速度超级快，哪怕面对海量的图形数据也是来去自如，简直就是动态效果高手。想象一下，要是用Canvas做出那种惊悚的动画，会不会让你一下子就想去尝试一下？
二、beginPath()方法
记住，beginPath()这个东东就是画画前的那个吆喝话，重要着！要开始整新的图形或者换条路走的话，就得用它。所以，想搞个新图案啥的，别忘了先喊一声”beginPath”
只要调用一句`context.beginPath();`，就能打开新的绘画路径！就好像你在画恐怖动画，开启了通往惊悚世界的大门似的。
let canvas = document.getElementById('canvas');let context = canvas.getContext('2d');
三、moveTo()方法
context.beginPath();
Canvas有个好用的函数叫moveTo(),能帮你把路径搬到画布的各个地方。不过要注意，它本身并不会勾勒线条。打个比方，就像你拿着笔画在纸上乱动，但不刻意画横竖线那样。
只要使用moveTo方法，将定位点设置为(x,y)就搞定了。写法就是这样的:`context.moveTo(x,y);`看起来就像是在黑夜中随意滑动是？
四、lineTo()方法
context.moveTo();
Canvas里的lineTo()这个家伙就是帮我们在画布上轻松地加个新点连起来成直线。和咱们平时用纸笔画直线差不多？懂了没？
使用’context.lineTo’这个函数画线条真的超级方便！只要给出坐标就可以啦～比如这样，’context.lineTo(x,y)’，这样就可以轻松地在画布上画出一条连起来的直线了。你能想象得到由这些线条构成的画面多恐怖吗？简直像在看恐怖电影一样刺激！
context.lineTo();
五、drawImage()方法
Canvas里那个drawImage()方法厉害了，可以拿来画图、画布或者视频。最棒的是，你还可以用这个方法切出图片的某些部分，改变它们的大小！这样一来，你就能在画布上画出各种各样的图形，超灵活的！
告诉你，学起来可能会有些麻烦，但掌握了也不是什么难事。首先要选好图片的源和目标位置比如，想把一张图放到画布里边去，就这样写嘛：`context.drawImage(image,x,y)`。看懂了呗？然后这个图像就能直接显示在（x，y）那个地方。试想一下，如果你能利用这个方法画出一些吓人的东西，那不就像是进入了一个恐怖的世界吗？
六、getImageData()方法
context.drawImage(image,x,y);
Canvas这个牛逼哄哄的东西能让你用getImageData()方法获取画面中的图像码（imageData）~它可是细心到告诉你每个像素的具体情况！想看哪里就可以看哪里，真的超方便！
这个getImageData()功能牛逼大了！要操作它，首先得定义个矩形区域。简单来说，就是这样子：”varimageData=context.getImageData(x,y,width,height)”。然后，就能拿到图画布上(x,y)那个点所在的、宽度和高度都是width和height的那个小矩形里头的各个像素信息了。想象一下，如果用这个方法把整个画布里所有像素的信息都给提取出来，那感觉简直像是在挖掘一部超级恐怖片！
七、putImageData()方法
Canvas里面那个putImageData()用得好的话，简直就是神兵利器靠它就能把以前抓到的画面像素完美地贴回来，太神奇了！
context.getImageData(x,y,width,height);
用putImageData()这个方法，给画布重新画出像素就轻松搞定了。只需要提供一个imageData对象，还有你想放在哪个地方（x,y），例如这样的代码就可以：`context.putImageData(imageData,x,y);`。这样一来，原本的像素数据就在新的（x,y）位置上展示出来！试想一下，如果把那些惊悚的像素数据再放回到画布，是不是有那种恐怖场景再次出现的感觉？
八、实战案例：制作一个简单的恐怖动画
搞定一部恐怖动画很简单！首先画出个Canvas元素，抓住它的“小狗”（这里指上下文）。接着用beginPath(),moveTo()andlineTo()三大招，搞定基本线条。然后利用drawImage()这个神奇技能，绘制出恐怖图像就好。最后再用getImageData()和putImageData()两式搞定像素信息，恐怖气氛瞬间提升！
想做个晚上飘魂的动画面？首先，画一颗模糊的鬼影子轮廓，用moveTo()和lineTo()画出罢了。接着，弄张紧张刺激的背景图，用drawImage()就行。再利用getImageData()拿到鬼影像素，搞些磨砂效果啥的。最后，用putImageData()把处理好的像素数据刷回去，搞定收工！
九、注意事项
看恐怖动画时，别忘了Canvas的尺寸得设定对了，否则没法好好作图哟。记住，图要先加载完了再开始绘图，否则意外状况可能会让你哭笑不得哟~而且别太贪心，疯狂堆叠图形到Canvas上可能会导致卡顿！
context.putImageData(imageData,x,y);
留意，做恐怖动画时多留心，比如线条粗细、颜色之类的，甚至透明度都要调好。别小看这些小细节，它们直接决定了画面效果哩！所以耐心搞搞好，这样才可能做出自己想要的东西。
十、总结
看完上面这些介绍，你现在应该知道如何使用Canvas来制作恐怖动画了？Canvas功能很强，可以弄出各种炫酷的网页特效。结合我们刚才学到的绘画技巧以及需要注意的点，相信你一定能够轻松上手~
哥儿几个，来挑战下自己，用Canvas画个恐怖动画怎么样？我觉得你们肯定能搞定！画出出其不意的惊悚效果不是问题！如果这篇文章对你们有益，就给点赞个再分享出去，让更多人见识Canvas的神奇！
评论0