每天10个前端知识点：HTML5(canvas应用)

作者: WangChloe | 来源:发表于2017-04-24 20:35 被阅读337次

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

(1) 应用 canvas笑脸
(2) 应用 canvas画图
(3) 应用 canvas变换
(4) 应用 canvas内长方形拖拽
(5) 应用 canvas内圆形拖拽
(6) 应用下载canvas绘图
(7) 应用 canvas运动回调
(8) canvas框架 jCanvaScript.js

(1) 应用 canvas笑脸

<canvas width="800" height="1200"></canvas>
<script>
    var oC = document.querySelector('canvas');
    var ctx = oC.getContext('2d');

    // face
    ctx.fillStyle = 'yellow';
    ctx.arc(400, 250, 180, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.stroke();

    // mouth
    ctx.beginPath();
    ctx.lineCap = 'round';

    ctx.lineWidth = 20;
    ctx.fillStyle = 'red';
    // ctx.arc(400, 280, 80, 0, Math.PI, false); // 笑脸
    ctx.arc(400, 350, 80, Math.PI, 0, false); //不开心脸
    // ctx.fill();  // 红色实心半圆张嘴笑脸
    ctx.stroke(); // 黑色半圆弧微笑脸

    // eyes
    ctx.beginPath();
    ctx.fillStyle = 'black';
    ctx.moveTo(350, 200);
    ctx.arc(350, 200, 20, 0, 2 * Math.PI, false);

    ctx.moveTo(450, 200);
    ctx.arc(450, 200, 20, 0, 2 * Math.PI, false);

    ctx.closePath();

    ctx.fill();
</script>

应用_canvas笑脸.PNG

应用_canvas笑脸2.PNG

应用_canvas笑脸3.PNG

(2) 应用 canvas画图

<canvas width="800" height="600"></canvas>
<script>
    var oC = document.querySelector('canvas');
    var ctx = oC.getContext('2d');

    oC.onmousedown = function(ev) {

        var {
            clientX,
            clientY
        } = ev;

        ctx.moveTo(clientX, clientY)

        oC.onmousemove = function(ev) {

            ctx.clearRect(0, 0, oC.width, oC.height);

            var {
                clientX,
                clientY
            } = ev;

            ctx.lineWidth = 5;
            ctx.lineTo(clientX, clientY);
            ctx.stroke();
        }

        oC.onmouseup = function() {
            oC.onmousemove = null;
            oC.onmouseup = null;
        }
    }
</script>

应用_canvas画图.gif

(3) 应用 canvas变换

<canvas width="800" height="600"></canvas>
    <script>
        var oC = document.querySelector('canvas');
        var ctx = oC.getContext('2d');

        var degree = 1;

        var x1 = 300;
        var y1 = 300;
        var w1 = 100;
        var h1 = 100;

        var x2 = 100;
        var y2 = 100;
        var w2 = 50;
        var h2 = 50;

        var rotate1 = 0;
        var rotate2 = 0;

        setInterval(function() {
            ctx.clearRect(-oC.width, -oC.height, oC.width * 2, 2 * oC.height);

            ctx.save();
            ctx.translate(x1, y1);
            ctx.rotate(rotate1);
            ctx.fillRect(-w1 / 2, -h1 / 2, w1, h1);
            ctx.restore();

            ctx.save();
            ctx.translate(x2, y2);
            ctx.rotate(rotate2);
            ctx.fillRect(-w2 / 2, -h2 / 2, w2, h2);
            ctx.restore()

            rotate1++;
            rotate2 += 0.2;
        }, 100)

        function d2a(deg) {
            return deg / 180 * Math.PI
        }
    </script>

应用_canvas变换.gif

(4) 应用 canvas内长方形拖拽

<canvas width="800" height="600"></canvas>
<script>
    var oC = document.querySelector('canvas');
    var ctx = oC.getContext('2d');

    var rect = {
        x: 0,
        y: 0,
        w: 100,
        h: 100
    }

    ctx.fillRect(
        rect.x,
        rect.y,
        rect.w,
        rect.h
    );

    oC.onmousedown = function({
        clientX,
        clientY
    }) {
        var {
            x,
            y,
            w,
            h
        } = rect;

        var disX = clientX - x;
        var disY = clientY - y;

        if (
            clientX > x &&
            clientX < x + w &&
            clientY > y &&
            clientY < y + h
        ) {
            oC.onmousemove = function({
                clientX,
                clientY
            }) {

                ctx.clearRect(0, 0, oC.width, oC.height)  // **先清空画布再画

                var deltaX = clientX - disX;
                var deltaY = clientY - disY;

                rect.x = deltaX;
                rect.y = deltaY;

                ctx.fillRect(
                    rect.x,
                    rect.y,
                    rect.w,
                    rect.h
                );
            }

            oC.onmouseup = function() {
                oC.onmousemove = null;
                oC.onmouseup = null;
            }
        }
    }
</script>

应用_canvas内长方形拖拽.gif

(5) 应用 canvas内圆形拖拽

<canvas width="800" height="600"></canvas>
<script>
    var oC = document.querySelector('canvas');
    var ctx = oC.getContext('2d');

    var circle = {
        x: 50,
        y: 50,
        r: 50
    }

    ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI, false);

    ctx.fill();

    oC.onmousedown = function({
        clientX,
        clientY
    }) {
        var {
            x,
            y,
            r
        } = circle;

        var disX = clientX - x;
        var disY = clientY - y;

        if (
            ctx.isPointInPath(clientX, clientY)  // 利用isPointInPath函数
        ) {
            oC.onmousemove = function({
                clientX,
                clientY
            }) {
                ctx.clearRect(0, 0, oC.width, oC.height);
                ctx.beginPath();

                var deltaX = clientX - disX;
                var deltaY = clientY - disY;

                circle.x = deltaX;
                circle.y = deltaY;

                ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI, false);
                ctx.fill();
            }

            oC.onmouseup = function() {
                oC.onmousemove = null;
                oC.onmouseup = null;
            }
        }
    }
</script>

应用_canvas内圆形拖拽.gif

(6) 应用下载canvas绘图

<canvas width="600" height="400"></canvas>
<br>
<button>Download</button>
<script>
    var oC = document.querySelector('canvas');
    var ctx = oC.getContext('2d');
    var oBtn = document.querySelector('button');

    var data = [
        rnd(100, 1000),
        rnd(100, 1000),
        rnd(100, 1000),
        rnd(100, 1000),
        rnd(100, 1000)
    ]

    var start = 0;

    var sum = sumUp(data);

    data.forEach(function(number, index) {
        var color = `rgb(${rnd(0,255)},${rnd(0,255)},${rnd(0,255)})`;

        var delta = number / sum * 2 * Math.PI;

        ctx.fillStyle = color;

        ctx.beginPath();

        ctx.moveTo(300, 200)
        ctx.arc(300, 200, 100, start, start + delta, false);
        ctx.lineTo(300, 200)

        ctx.fill();

        start = start + delta;
    })

    function sumUp(array) {
        var sum = 0;

        array.forEach(function(n) {
            sum += n
        })

        return sum;
    }

    function rnd(n, m) {
        return parseInt(Math.random() * (m - n) + n);
    }

    // **下载canvas图片
    oBtn.onclick = function() {
        var oA = document.createElement('a');
        oA.href = oC.toDataURL();
        oA.download = '默认命名';
        // oA.download = fileName.value ? fileName.value : '默认命名' + '.png';

        oA.click();
    }
</script>

应用_下载canvas绘图.gif

(7) 应用 canvas运动回调

<script>
    function loadStatics(statics, callback) {
        var count = 0;

        statics.forEach(function(path, index) {
            var oImage = new Image();
            oImage.src = `img/${path}.png`

            resources[path] = oImage;

            oImage.onload = function() {

                count++

                if (count == statics.length) {
                    callback && callback();
                }
            }
        })
    }

    function d2a(d) {
        return d / 180 * Math.PI
    }

    function a2d(a) {
        return a / Math.PI * 180
    }

    function rnd(n, m) {
        return parseInt(Math.random() * (m - n) + n)
    }

    function rndSign() {
        return Math.random() < 0.5 ? -1 : 1
    }
</script>

(8) canvas框架 jCanvaScript.js

jCanvaScript.js

示例

<canvas id="c1" width="500" height="500"></canvas>
<script src="libs/jCanvaScript.1.5.18.min.js"></script>
<script>
    var idCanvas = "c1";
    onload_1();

    var interval_1 = 0;

    function startShow() {
        var r = Math.floor(Math.random() * (254)),
            g = Math.floor(Math.random() * (254)),
            b = Math.floor(Math.random() * (254)),
            x = Math.floor(Math.random() * (439)),
            y = Math.floor(Math.random() * (554)),
            color = "rgba(" + r + ", " + g + ", " + b + ", 0.5)",
            filled = true,
            radius = 1;
        jc.circle(x, y, radius, color, filled)
            .animate({
                radius: 100,
                opacity: 0
            }, 1500, function() {
                this.del();
            });
    }

    function onload_1() {
        jc.start(idCanvas, true);
        interval_1 = setInterval(startShow, 200);
    }

    function start_1(idCanvas) {
        if (interval_1) return;
        onload_1();
    }

    function stop_1(idCanvas) {
        clearInterval(interval_1);
        interval_1 = 0;
        jc.clear(idCanvas);
    }
</script>

canvas框架 jCanvaScript.gif

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。

微信公众号：无媛无故

网友评论

本文标题：每天10个前端知识点：HTML5(canvas应用)

本文链接：https://www.haomeiwen.com/subject/pvbmnttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

每天10个前端知识点：HTML5(canvas应用)

(1) 应用 canvas笑脸

(2) 应用 canvas画图

(3) 应用 canvas变换

(4) 应用 canvas内长方形拖拽

(5) 应用 canvas内圆形拖拽

(6) 应用下载canvas绘图

(7) 应用 canvas运动回调

(8) canvas框架 jCanvaScript.js

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web前端之路

让前端飞

程序猿阵线联盟-汇总各类技术干货

每天10个前端知识点：HTML5(canvas应用)

(1) 应用 canvas笑脸

(2) 应用 canvas画图

(3) 应用 canvas变换

(4) 应用 canvas内长方形拖拽

(5) 应用 canvas内圆形拖拽

(6) 应用 下载canvas绘图

(7) 应用 canvas运动回调

(8) canvas框架 jCanvaScript.js

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web前端之路

让前端飞

程序猿阵线联盟-汇总各类技术干货

(6) 应用下载canvas绘图