标签：strokeStyle style ctx canvas rg let 使用 时钟

今天看了H5的canvas，练习使用下。待完善。。。

class Clock {
    constructor(canvas) {
        this.canvas = canvas;
    }

    draw() {
        let ctx = this.canvas.getContext("2d");
        
        ctx.setDefault = function() {
            const default_strokeStyle = "#000000";
            this.strokeStyle = default_strokeStyle; 
        }

        this.drawClockDialPlate(ctx);
        this.drawClockDial(ctx);

    }

    // 画表盘
    drawClockDialPlate(ctx) {
        ctx.beginPath();
        ctx.strokeStyle = "blue";
        ctx.lineWidth = 2;
        ctx.arc(400, 300, 200, 0, Math.PI*2, false);
        ctx.stroke();

        ctx.setDefault();
    }

    // 画刻度盘
    drawClockDial(ctx) {

        ctx.beginPath();
        ctx.translate(400, 300);
        ctx.lineWidth = 1;

        let scale = 30; // 每一小时对应30度

        let rg = ctx.createRadialGradient(0, 0, 180, 0, 0, 185);
        rg.addColorStop(0.9, this.canvas.style.backgroundColor);
        rg.addColorStop(1, "blue");
        ctx.strokeStyle = rg;

        for (let an = 0; an < 360; an += scale) {

            // 先画再转
            ctx.moveTo(0, 0);
            ctx.lineTo(200, 0);
            ctx.rotate(scale * Math.PI / 180);
        }

        ctx.stroke();

        // 重复画会导致小时刻度不明显
        ctx.beginPath();
        scale = 6; // 每一分钟对应6度
        rg = ctx.createRadialGradient(0, 0, 190, 0, 0, 195);
        rg.addColorStop(0.9, this.canvas.style.backgroundColor);
        rg.addColorStop(1, "blue");
        ctx.strokeStyle = rg;
        
        for (let an = 0; an < 360; an += scale) {
 
            // 重复画会导致小时刻度不明显
            if (an % 30 !== 0) { 
                ctx.moveTo(0, 0);
                ctx.lineTo(200, 0);
            }

            ctx.rotate(scale * Math.PI / 180);

        }
        
        ctx.stroke();

        ctx.setDefault();
        ctx.translate(-400, -300); // 还原
    }

}

let canvas = document.createElement("canvas");
let style = canvas.style;
[canvas.width, canvas.height] = [800, 600];
[style.backgroundColor, style.position, style.zIndex] = ["green", "absolute", 1]
document.body.prepend(canvas);

new Clock(canvas).draw();

标签：strokeStyle,style,ctx,canvas,rg,let,使用,时钟
来源： https://www.cnblogs.com/Home-Artchy/p/12008668.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。