html5 canvas 自动画圆

最新推荐文章于 2024-01-15 11:50:28 发布

转载最新推荐文章于 2024-01-15 11:50:28 发布 · 190 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2348516/blog/483515

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML5 Canvas和jQuery结合的技术来实现动态绘制圆形的方法。通过监听鼠标点击事件，程序会在画布上从点击点开始，逐步绘制出带有随机颜色和大小的圆弧，直到形成完整的圆形。此技术适用于创建动态视觉效果，如背景装饰或响应式UI元素。

/**
 * Created by Pretender on 2015/7/24.
 */
;(function($){
    var leftVal;
    var topVal;
    var mousePos;
    var step;
    var start;
    var end,add = Math.PI*2/180;
    var n = 180;
    var vName;
    var radius;
    var cvs = document.getElementById("mycanvas");
    if(cvs == null) return false;
    var ctx = cvs.getContext("2d");
    ctx.lineWidth = 1.0;

    //获取鼠标位置
    function mouseCoords(ev)
    {
        if(ev.pageX || ev.pageY){
            return {
                x:ev.pageX, y:ev.pageY
            };
        }
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop - document.body.clientTop
        };
    }
    function drawCircle(){
        start = 0;
        step = 1;
        ctx.strokeStyle ='#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
        radius = Math.floor(Math.random()*50+50);
        vName= setInterval(animation, 30);

    }
    var animation = function () {
        if (step <= n) {
            end = start + add ;
            drawArc(start, end);
            start = end;
            step++;

        } else {
            clearInterval(vName);
        }

    };
    function drawArc(s, e) {
        ctx.beginPath();
        ctx.arc(leftVal, topVal, radius, s, e, false);
        ctx.lineWidth = 1.0;
        ctx.stroke();
    }
    $(document).bind("click",function(event){
        mousePos = mouseCoords(event);
        leftVal = mousePos.x;
        topVal = mousePos.y;
        drawCircle();
    });

})(jQuery)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas画圆</title>
    <script type="text/javascript" src="js/jquery-1.9.0.min.js" charset="UTF-8"></script>

</head>
<body>
    <canvas id="mycanvas" width="1500" height="500" style="background: #000;" ></canvas>
    <script type="text/javascript" src="js/demo12.js" charset="UTF-8"></script>
</body>
</html>

转载于:https://my.oschina.net/u/2348516/blog/483515