canvas应用

画圆,外圆被截取?
注意: 画圆的半径是以宽度(lineWidth)的一半画的,所以只需要减去一半就可以了

<body>
  <canvas id="clock" width="200px" height="200px"></canvas>
  <script>
    let clock = document.getElementById('clock')
    let ctx= clock.getContext('2d')
    let width = ctx.canvas.width
    let height = ctx.canvas.height
    let r = width / 2
    let rem = width / 200

    function drawBackground() {
      ctx.translate(r,r)
      ctx.beginPath()
      ctx.lineWidth = 10
      ctx.arc(0, 0, r, 0 ,2*Math.PI, false)
      // ctx.arc(0, 0, r - 5, 0 ,2*Math.PI, false)
      ctx.stroke()
    }
    drawBackground()
  </script>
</body>

另外可以把lineWidth设置很大看看效果,黑色正方形,中间一个白圆

在这里插入图片描述

时钟案例

translate ,rotate ,save, restore, beginPath
2 PI RAD = 360

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>clock</title>
    <style>
        div{
            text-align: center;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div>
    <canvas id="clock" height="200px" width="200px"></canvas>
</div>
<script src="js/clock.js"></script>
</body>
</html>

let dom = document.getElementById('clock');
let ctx = dom.getContext('2d');
let width = ctx.canvas.width;
let height = ctx.canvas.height;
var r = width / 2;
//为了宽度高度放大是时，其他边框等比美观，所以设置一个比例
var rem = width / 200;
/*
200 / width = 10 / x
x = 10 * width / 200
*/
function drawBackground() {
    ctx.save(); // 这个状态再最后画的时候要还原
    ctx.translate(r, r);
    ctx.beginPath();  //每次开始前必须开始一条路径
    //按比例输出边框宽度，width/200=x/10=rem; 即 x=10 *rem
    ctx.lineWidth = 10 * rem;
    ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false);

    ctx.stroke();

    var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
    hourNumbers.map(function (number, i) {
        var rad = 2 * Math.PI / 12 * i; // 从3小时对应下标为0弧度
        var x = Math.cos(rad) * (r - 30 * rem); // 文字小于外圆半径,所以要小一些
        var y = Math.sin(rad) * (r - 30 * rem);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.font = 18 * rem + "px Arial";
        ctx.fillText(number, x, y)
    });

    for (var i = 0; i < 60; i++) {
        var rad = 2 * Math.PI / 60 * i;
        var x = Math.cos(rad) * (r - 18 * rem);
        var y = Math.sin(rad) * (r - 18 * rem);
        ctx.beginPath();
        if (i % 5 === 0) {
            ctx.fillStyle = '#000';
        } else {
            ctx.fillStyle = '#ccc';
        }
        ctx.arc(x, y, 2 * rem, 2 * Math.PI, false);
        ctx.fill();
    }
}

function drawHour(hour, minute) {
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 12 * hour;
    var mrad = 2 * Math.PI / 12 / 60 * minute; // 一个钟有60分钟,旋转角度
    ctx.rotate(rad + mrad);
    // 旋转是改变画布,不是画图的状态, 默认左上角,顺时针旋转 可以通过translate改变 , 刚开始已经改变了
    // 先旋转再画, 改变的是坐标,不然不会变化
    // 另外这个方法改变了画布, 下面画`分钟`的时候, 画布也是被旋转的,所以要先sava(),保存旋转钱状态,画完之后要restore()
    ctx.lineWidth = 6 * rem;
    ctx.moveTo(0, 10 * rem); // 往下面一点, 时针有尾巴
    ctx.lineTo(0, -r / 2);
    ctx.lineCap = 'round';
    ctx.stroke();
    ctx.restore();
}

function drawMinute(minute) {
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60 * minute;
    ctx.rotate(rad);
    ctx.lineWidth = 3 * rem;
    ctx.moveTo(0, 10 * rem);
    ctx.lineTo(0, -r / 2 - 10);
    ctx.lineCap = 'round';
    ctx.stroke();
    ctx.restore();
}

function drawSecond(second) {
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60 * second;
    ctx.rotate(rad);
    ctx.lineWidth = 3;
    ctx.moveTo(-2 * rem, 20 * rem);
    ctx.lineTo(2 * rem, 20 * rem);
    ctx.lineTo(1, -r + 18 * rem);
    ctx.lineTo(1, -r + 18 * rem);
    ctx.fillStyle = '#e4393c';
    ctx.fill();
    ctx.restore();
}

function drawDot() {
    ctx.beginPath();
    ctx.fillStyle = '#fff';
    ctx.arc(0, 0, 3 * rem, 2 * Math.PI, false);
    ctx.fill();
}

function draw() {
    ctx.clearRect(0, 0, width, height);
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    drawBackground();
    drawHour(hour, minute);
    drawMinute(minute);
    drawSecond(second);
    drawDot();
    ctx.restore(); // 还原最初的样式 (不translate)
}
draw()
setInterval(draw, 1000);

在这里插入图片描述

tinfengyee

发布了25 篇原创文章 · 获赞 5 · 访问量 1131

私信关注

猜你喜欢