网站首页 » 前端开发 » HTML5 » Canvas 征战之旅
上一篇:
下一篇:

Canvas 征战之旅

前言

Canvas 的使用越来越多,比如百度的 echart.js 就是用canvas 实现的。在没有看到类似 echart.js 这样的惊人效果后,我一直不相信 Canvas 是如此惊艳。为了说服自己在网上也查阅了很多有关于 Canvas 的例子。真的可以很炫。于是就开始了Canvas 之旅,但是本文要说的不是 Canvas 如何如何,而是把在学习 Canvas 时的一些坑也好,技巧也好,或者说是解决方案也罢,都统统记录下来,以便前人种树,后人乘凉。更确确地说只是为了让自己对 Canvas 有更深刻的理解。

Canvas 技巧

Canvas 满屏

CSS 样式就够?
*{
    padding: 0;
    margin: 0;
}
html,body,canvas{
    width: 100%;
    height: 100%;
}
canvas{
    display: block
}

canvas 默认是行内元素(display:inline-block),所以我们需要把它改成块级元素(display:block),不然页面会出现左右滚动条。但是如果设置 canvas 的宽高都为100% 那么画出来的东西就会变模糊,这个原因我也没搞清楚,我们可以通过 JavaScript 来动态设置 canvas 的宽高。

JavaScript 设置宽高
var stateW = document.body.offsetWidth,
    stateH = document.body.offsetHeight,
    iCanvas = document.getElementById("canvas");
    iCanvas.width = stateW;
    iCanvas.height = stateH;

动态设置 Canvas 的宽高,可以间接地解决画面模糊的问题。

Canvas 动画

让 Canvas 如丝般顺滑
(function move() {
    // 启用动画帧
    animate = window.requestAnimationFrame(move);
    vy += iSnow.a;
    iSnow.y += vy;
    ctx.clearRect(0, 0, iCanvasW, iCanvasH);

    if (iSnow.y > iCanvasH - iSnow.size) {
        iSnow.y = iCanvasH - iSnow.size;
        vy *= -0.8;
        if (Math.abs(vy) < 0.8) {
            // 取消动画帧
            cancelAnimationFrame(animate);
        }
    }

    iSnow.render(ctx);
})();

这段代码虽然多了点,但你只需要看两行就可以了。animate = window.requestAnimationFrame(move); 和 cancelAnimationFrame(animate); 这两行代码配合使用。就像原生 JavaScript 中的 setInterval() 和clearInterval() 。动画案例可能参考这里:http://yunkus.com/demo/canvas-infinite-uniform-motion-circle/index4.html

arc() 方法的使用

使用这个方法时,如果只是画一个型状是没什么问题,但如果要连续画多个图案,那么我们就需要像下面这样写:

看这里
......
ctx.beginPath(); // 这个一定要加
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.closePath(); // 这个一定要加
......

要配合 beginPath() 和 closePath() 方法。不然画出来的图案会惨不忍睹。

有加的 DEMO:http://yunkus.com/demo/canvas/canvas-tips/

没加的 DEMO:http://yunkus.com/demo/canvas/canvas-tips/index2.html

 

待续。。。。。。。。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/canvas-tips/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END