欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

使用h5canvas實(shí)現(xiàn)時(shí)鐘動(dòng)態(tài)效果的案例-創(chuàng)新互聯(lián)

使用h5 canvas實(shí)現(xiàn)時(shí)鐘動(dòng)態(tài)效果的案例？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)來(lái)賓免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了近千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

canvas 繪制好時(shí)鐘界面，使用定時(shí)器定時(shí)重繪整個(gè)canvas，就實(shí)現(xiàn)了仿真動(dòng)態(tài)時(shí)鐘的效果。

難點(diǎn)在于：

  • 秒鐘刻度和時(shí)鐘刻度的繪制

  • 整點(diǎn)文字沿著內(nèi)邊圓形環(huán)繞

其中刻度的環(huán)繞并不難計(jì)算，文字的環(huán)繞就比較坑爹了，canvas繪制的文字是在繪制坐標(biāo)之上的（文字基線(xiàn)和對(duì)齊方式影響），需要進(jìn)行偏移的計(jì)算，使之文字中點(diǎn)正好落在圓上。
這一步相當(dāng)?shù)郏捎赼pi中并沒(méi)有測(cè)量字高的辦法，而使用fontSize，其實(shí)也并不是字的準(zhǔn)確高度，因此，y坐標(biāo)+二分之一行高向下偏移，使之垂直居中，卻總是不夠準(zhǔn)確的。而x坐標(biāo)+二分之一行寬向左偏移，使之水平居中，則沒(méi)有這個(gè)問(wèn)題，因?yàn)閍pi提供了測(cè)量行寬的方法。

一切都是因?yàn)?code>ctx.measureText(text).width存在，但ctx.measureText(numText).height不存在。打印測(cè)量結(jié)果，也只有一個(gè)寬度屬性。文檔中說(shuō)canvas對(duì)于繪制文字的支持比較弱，從這一點(diǎn)上看 何止是弱。

直接設(shè)置基線(xiàn)和對(duì)齊方式為居中，似乎也存在一定誤差，看起來(lái)總不是那么賞心悅目。下面的代碼中兩種方式都寫(xiě)了。

主要知識(shí)點(diǎn)為圓的坐標(biāo)公式，和三角函數(shù)sin，cos計(jì)算。實(shí)際上，圓的坐標(biāo)公式使用的并不多，引入求值反而可能復(fù)雜化。

canvas畫(huà)時(shí)鐘效果的代碼編寫(xiě)

下面是全部代碼：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1024, height=768,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>時(shí)鐘</title></head><body><p style="margin: 50px">
    <canvas width="300" height="300"></canvas>
    <canvas width="200" height="200" style="background-color: #bbbbbb"></canvas>
    <canvas width="200" height="200"></canvas>
    <canvas width="200" height="200"></canvas></p><script>

    var clockHelper = function (canvas, config) {
        if (!config) {
            config = {}
        }        var ctx = canvas.getContext('2d');        var deColor = config.deColor ? config.deColor : '#333333';        var deConfig = {
            ringWidth: config.ringWidth ? config.ringWidth : 6,//圓環(huán)寬度
            ringColor: config.ringColor ? config.ringColor : deColor,//圓環(huán)顏色
            hSaleL: config.hSaleL ? config.hSaleL : 8,//時(shí)刻度線(xiàn)長(zhǎng)
            hScaleWidth: config.hScaleWidth ? config.hScaleWidth : 4,//時(shí)刻度線(xiàn)寬
            hScaleColor: config.hScaleColor ? config.hScaleColor : deColor,//時(shí)刻度顏色
            msSaleL: config.msSaleL ? config.msSaleL : 4,//分秒刻度線(xiàn)長(zhǎng)
            msScaleWidth: config.msScaleWidth ? config.msScaleWidth : 2,//分秒刻度線(xiàn)寬
            msScaleColor: deColor,//分秒刻度顏色
            hFontSize: config.hFontSize ? config.hFontSize : 18,//整點(diǎn)文字大小
            hHandWidth: config.hHandWidth ? config.hHandWidth : 10,//時(shí)針寬度
            mHandWidth: config.mHandWidth ? config.mHandWidth : 5,//分針寬度
            sHandWidth: config.sHandWidth ? config.sHandWidth : 2,//秒針寬度

            hHandColor: config.hHandColor ? config.hHandColor : deColor,//時(shí)針顏色
            mHandColor: config.mHandColor ? config.mHandColor : deColor,//分針顏色
            sHandColor: config.sHandColor ? config.sHandColor : '#bb3333',//秒針顏色
            handMode: ['ms', 's'].indexOf("" + config.handMode) !== -1 ? config.handMode : 's',//指針讀秒模式，ms:毫秒，s：秒。
            clockFaceColor: config.clockFaceColor ? config.clockFaceColor : '',
        };        var ox = canvas.width / 2;        var oy = canvas.height / 2;        var width = canvas.width;        var height = canvas.height;

        ctx.font = deConfig.hFontSize + "px 黑體";        //中線(xiàn)圓環(huán)半徑
        var ringR = (width < height) ? (width / 2 - deConfig.ringWidth / 2) : (height / 2 - deConfig.ringWidth / 2);        //內(nèi)圓環(huán)半徑
        var ringInnerR = (width < height) ? (width / 2 - deConfig.ringWidth) : (height / 2 - deConfig.ringWidth);        var timer;        var timeSleep = 100;        var isStart = false;        function start() {
            if (isStart) {                return;
            }
            isStart = true;            if (deConfig.handMode == 'ms') {
                timeSleep = 100;
            } else {
                timeSleep = 1000;
            }

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

            timer = setInterval(function () {
                if (isStart) {
                    ctx.clearRect(0, 0, width, height);
                    draw();
                }
            }, timeSleep);

        }        function stop() {
            isStart = false;
            clearInterval(timer)
        }        function draw() {

            beforeDraw();

            drawCircleFace();
            drawHands();

            afterDraw();

        }        function drawCircleFace() {

            ctx.fillStyle = deConfig.ringColor;
            ctx.strokeStyle = deConfig.ringColor;

            ctx.lineWidth = deConfig.ringWidth;
            ctx.beginPath();
            ctx.arc(ox, oy, ringR, 0, Math.PI * 2);
            ctx.stroke();            if (deConfig.clockFaceColor) {
                ctx.fillStyle = deConfig.clockFaceColor;
                ctx.fill();
            }            var x1 = ox;            var y1 = oy;            var x2 = ox;            var y2 = oy;            var radin = 0;
            ctx.lineWidth = deConfig.hScaleWidth;            // ctx.beginPath();
            for (var i = 1; i <= 60; i++) {
                radin = i * 6 * Math.PI / 180;
                x1 = ox + ringInnerR * Math.sin(radin);
                y1 = oy - ringInnerR * Math.cos(radin);                if (i % 5 === 0) {
                    ctx.lineWidth = deConfig.hScaleWidth;
                    x2 = ox + (ringInnerR - deConfig.hSaleL) * Math.sin(radin);
                    y2 = oy - (ringInnerR - deConfig.hSaleL) * Math.cos(radin);

                    ctx.fillStyle = deConfig.hScaleColor;                    var numText = i / 5 + "";                    var textWidth = ctx.measureText(numText).width;                    var x3 = ox + (ringInnerR - deConfig.hSaleL - deConfig.hFontSize) * Math.sin(radin);                    var y3 = oy - (ringInnerR - deConfig.hSaleL - deConfig.hFontSize) * Math.cos(radin);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';                    //不設(shè)置文字居中，基線(xiàn)居中，自己計(jì)算。貌似都有誤差。因?yàn)樾D(zhuǎn)過(guò)程中，角度變化，且文字寬高不盡相同
                    // var x3 = ox + (ringInnerR - deConfig.hSaleL - deConfig.hFontSize) * Math.sin(radin) - textWidth / 2;
                    // var y3 = oy - (ringInnerR - deConfig.hSaleL - deConfig.hFontSize) * Math.cos(radin) + deConfig.hFontSize/ 2;
                    //x2，y2已經(jīng)求過(guò)，化簡(jiǎn)為：
                    // var x3 = x2 - deConfig.hFontSize * Math.sin(radin) - textWidth / 2;
                    // var y3 = y2 + deConfig.hFontSize * Math.cos(radin) + textWidth / 2;
                    //文字x軸向左偏移一半文字寬，使之水平居中;向下偏移一半高度,使之垂直居中。
                    // 實(shí)際中發(fā)現(xiàn)，字高沒(méi)法測(cè)（api無(wú)），而使用fontSize不準(zhǔn)。但y軸加上字寬，位置倒是更對(duì)齊一些。

                    // var x3 = x2 + textWidth / 2;
                    // var y3 = y2 - deConfig.hFontSize / 2;

                    ctx.fillText(numText, x3, y3);

                } else {
                    ctx.lineWidth = deConfig.msScaleWidth;
                    x2 = ox + (ringInnerR - deConfig.msSaleL) * Math.sin(radin);
                    y2 = oy - (ringInnerR - deConfig.msSaleL) * Math.cos(radin);
                }


                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.stroke();

            }

        }        //改變坐標(biāo)中點(diǎn)，并旋轉(zhuǎn)畫(huà)布也許是更好的選擇。
        function drawHands() {
            var date = new Date();            var h = date.getHours() % 12;            var m = date.getMinutes();            var s = date.getSeconds();            var ms = date.getMilliseconds();            // console.log(h + "：" + m + "：" + s);
            //    時(shí)針

            var hRadin = (h + m / 60 + s / 3600) * Math.PI * 2 / 12;            var mRadin = (m + s / 60) * Math.PI * 2 / 60;            var sRadin;            if (deConfig.handMode == 'ms') {
                sRadin = (s + ms / 1000) * Math.PI * 2 / 60;
            } else {
                sRadin = s * Math.PI * 2 / 60;
            }            var x = 0;            var y = 0;            var hDotR = deConfig.hHandWidth + 2;            var mDotR = 0.6 * hDotR            var sDotR = 0.5 * hDotR            //秒針半徑
            var sHandR = ringInnerR - deConfig.hSaleL * 2
            //分針半徑
            var mHandR = 0.8 * sHandR;            //時(shí)針半徑
            var hHandR = 0.7 * mHandR;            //時(shí)針
            ctx.beginPath();
            ctx.lineWidth = deConfig.hHandWidth;
            ctx.strokeStyle = deConfig.hHandColor;
            ctx.strokeStyle = deConfig.hHandColor;
            ctx.moveTo(ox, oy);
            x = ox + hHandR * Math.cos(hRadin - Math.PI / 2);
            y = oy + hHandR * Math.sin(hRadin - Math.PI / 2);
            ctx.lineTo(x, y);
            ctx.stroke();            //針尖。直接圓型了（矩形指針來(lái)繪制針尖，計(jì)算復(fù)雜。。。）
            ctx.beginPath();
            ctx.lineWidth = 0;
            ctx.arc(x, y, deConfig.hHandWidth / 2, 0, 2 * Math.PI);
            ctx.fill();            //中心
            ctx.beginPath();            // ctx.lineWidth = hDotR;
            ctx.arc(ox, oy, hDotR / 2, 0, Math.PI * 2);
            ctx.fill();
            ctx.stroke();            //分針
            ctx.beginPath();
            ctx.lineWidth = deConfig.mHandWidth;
            ctx.strokeStyle = deConfig.mHandColor;
            ctx.fillStyle = deConfig.mHandColor;
            ctx.moveTo(ox, oy);
            x = ox + mHandR * Math.cos(mRadin - Math.PI / 2);
            y = oy + mHandR * Math.sin(mRadin - Math.PI / 2);
            ctx.lineTo(x, y);
            ctx.stroke();            //針尖。直接圓型了（矩形指針來(lái)繪制針尖，計(jì)算復(fù)雜。。。）
            ctx.beginPath();
            ctx.lineWidth = 0;
            ctx.arc(x, y, deConfig.mHandWidth / 2, 0, 2 * Math.PI);
            ctx.fill();            //中心
            ctx.beginPath();
            ctx.arc(ox, oy, mDotR / 2, 0, Math.PI * 2);
            ctx.stroke();            //秒針
            ctx.beginPath();
            ctx.strokeStyle = deConfig.sHandColor;
            ctx.fillStyle = deConfig.sHandColor;
            ctx.lineWidth = deConfig.sHandWidth;            //秒針有長(zhǎng)短兩線(xiàn)
            x = ox - sHandR / 4 * Math.cos(sRadin - Math.PI / 2);
            y = oy - sHandR / 4 * Math.sin(sRadin - Math.PI / 2);
            ctx.moveTo(x, y);
            x = ox + sHandR * Math.cos(sRadin - Math.PI / 2);
            y = oy + sHandR * Math.sin(sRadin - Math.PI / 2);
            ctx.lineTo(x, y);
            ctx.stroke();            //針尖。直接圓型了（矩形指針來(lái)繪制針尖，計(jì)算復(fù)雜。。。）
            ctx.beginPath();
            ctx.lineWidth = 0;
            ctx.arc(x, y, deConfig.sHandWidth / 2, 0, 2 * Math.PI);
            ctx.fill();            //中心
            ctx.beginPath();
            ctx.fillStyle = deColor;
            ctx.arc(ox, oy, sDotR, 0, Math.PI * 2);
            ctx.fill();
            ctx.stroke();

        }        function beforeDraw() {
            if (typeof exp.beforeDraw === 'function') {
                exp.beforeDraw(ctx, deConfig);
            }
        }        function afterDraw() {
            if (typeof exp.afterDraw === 'function') {
                exp.afterDraw(ctx, deConfig);
            }
        }        var exp = {
            start: start,
            stop: stop,
            beforeDraw: null,
            afterDraw: null,
        }        return exp;


    }    var clockCanvas1 = document.getElementsByTagName('canvas')[0];    var clockCanvas2 = document.getElementsByTagName('canvas')[1];    var clockCanvas3 = document.getElementsByTagName('canvas')[2];    var clockCanvas4 = document.getElementsByTagName('canvas')[3];    var clock = clockHelper(clockCanvas1, {mHandColor: '#3333bb', sHandColor: '#bb3333'});
    clock.start();
    setTimeout(function () {
        clock.stop()
    }, 5000)
    setTimeout(function () {
        clock.start();
    }, 8000)

    clockHelper(clockCanvas2, {
        mHandColor: 'green',
        hHandWidth: 6,
        mHandWidth: 4,
        hFontSize: 14,
        hScaleWidth: 2,
        handMode: 'ms'
    }).start();


    clockHelper(clockCanvas2, {
        mHandColor: 'green',
        hHandWidth: 6,
        mHandWidth: 4,
        hFontSize: 14,
        hScaleWidth: 2,
        handMode: 'ms'
    }).start();


    clockHelper(clockCanvas3, {
        deColor: '#bbbbbb',
        sHandColor: '#bbbbbb',
        clockFaceColor: '#112233',//鐘面
        hHandWidth: 6,
        mHandWidth: 4,
        hFontSize: 14,
        hScaleWidth: 2,
        handMode: 's'
    }).start();    var clock4 = clockHelper(clockCanvas4, {
        deColor: '#bbbbbb',
        sHandColor: '#bbbbbb',        // clockFaceColor: '#112233',
        hHandWidth: 6,
        mHandWidth: 4,
        hFontSize: 14,
        hScaleWidth: 2,
        handMode: 's'
    });

    clock4.afterDraw = function (ctx, deConfig) {
        var grd = ctx.createLinearGradient(0, 0, clockCanvas4.width, clockCanvas4.height);
        grd.addColorStop(0, "rgba(255,0,0,0.3)");
        grd.addColorStop(1, "rgba(0,0,255,0.5)");
        ctx.fillStyle = grd;
        ctx.arc(clockCanvas4.width/2,clockCanvas4.height/2,clockCanvas4.width/2,0,Math.PI*2);        // ctx.fillRect(0, 0, clockCanvas4.width, clockCanvas4.height);
        ctx.fill();

        ctx.fillText('時(shí)鐘繪制完成后，自定義其他繪制',clockCanvas4.width/2,clockCanvas4.height - deConfig.hFontSize);
    };

    clock4.start();</script></body></html>

說(shuō)明：

1、clockHelper第一個(gè)參數(shù)傳入畫(huà)布。第二個(gè)參數(shù)傳入時(shí)鐘界面的配置對(duì)象，包括指針、刻度的顏色、大小等，配置項(xiàng)和clockHelper中的deConfig默認(rèn)對(duì)象是相對(duì)的，參考deConfig的屬性傳入?yún)?shù)即可。

2、clockHelper的封裝性略差，僅是基本能用型。但屬性不多，改造應(yīng)該并不困難。

3、提供了時(shí)鐘界面繪制之前和之后的方法，可以在beforeDraw和afterDraw這兩個(gè)方法中執(zhí)行自己的邏輯。但是由于事先設(shè)計(jì)沒(méi)有留出足夠的空白像素，用處不大。只能進(jìn)行一些簡(jiǎn)單的再繪制。比如給鐘面添加色彩、漸變。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)使用h5 canvas實(shí)現(xiàn)時(shí)鐘動(dòng)態(tài)效果的案例大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

分享標(biāo)題：使用h5canvas實(shí)現(xiàn)時(shí)鐘動(dòng)態(tài)效果的案例-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://chinadenli.net/article6/dgosig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、品牌網(wǎng)站建設(shè)、網(wǎng)站收錄、商城網(wǎng)站、動(dòng)態(tài)網(wǎng)站、軟件開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)