Canvas绘图——2d表

初学JavaScript,用Canvas画一个表。主要用到昨天学的间歇调用(setInterval)。

方法和属性介绍

  • context.beginPath()、context.closePath():开始路径和结束路径。通俗讲就像纸上画画的落笔和提笔。
  • context.strokeStyle、context.fillStyle:设置边框颜色和填充颜色。
  • context.arc(x,y,radius,startAngle,endAngle,anticlockwise):画一个圆。
  • context.rotate(angle):旋转,弧度。
  • context.translate(x, y):将(x,y)设为原点坐标,即以(x,y)为基准点。
  • context.moveTo(x,y)、 context.lineTo(x,y):将笔移动到(x,y),画直线到(x,y)。
  • context.stroke()、context.fill():开始绘制边框和绘制颜色。 上述方法和属性加粗的是必用的,其余的可选,根据需求看需要画什么则用什么。
  • setInterval = function(code,delay,arguments) {}:这个函数代表每隔几秒运行一次,见JavaScript概览

代码解析

HTML中:

......
<canvas id="c" width="200" height="200">A drawing of something.</canvas>
<script src="js/clock2d.js"></script>
...... 

clock2d.js中: 声明变量。

var canvas = document.getElementById("c");
var context = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var r = width / 2;

写间歇调用函数。表盘和刻度是静态的,指针是动态的,每秒需要刷新重画,所以代码应该是这样:

setInterval(function () {
    context.clearRect(0, 0, width, height); // 清空画布所有内容
    context.save(); 
    context.translate(width / 2, height / 2); //将画布中心设为原点
    drawStatic(); 
    drawDynamic();
    context.restore();
}, 1000);

写绘制静态表盘函数。由于内表盘和外表盘还有刻度都是圆,所以可以最后重构成一个函数。

function drawStatic() {
    // 外圆
    drawCircle(1, "#000000", "rgba(0, 0, 0, 0)", 0, 0, r * 0.9);
    // 内圆
    drawCircle(1, "#000000", "rgba(0, 0, 0, 0)", 0, 0, r * 0.87);
    // 刻度点12
    drawCircle(1, "#000000", "#000000", 0, -r * 0.80, 2);
    // 刻度点6
    drawCircle(1, "#000000", "#000000", 0, r * 0.80, 2);
    // 刻度点3
    drawCircle(1, "#000000", "#000000", r * 0.80, 0, 2);
    // 刻度点9
    drawCircle(1, "#000000", "#000000", -r * 0.80, 0, 2);
}

function drawCircle(lineWidth, strokeColor, fillColor, x, y, radius) {
    context.beginPath();
    context.lineWidth = lineWidth;
    context.strokeStyle = strokeColor;
    context.fillStyle = fillColor;
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.stroke();
    context.fill();
    context.closePath();
}

绘制指针。绘制时针的位置,需要知道是几小时几分,最终都转换成小时,然后计算相应的旋转弧度,绘制分针的位置,需要知道几分几秒,最终都转换成分针,计算相应的弧度,所以也可以重构成同一个函数,只是最终转换的和分度值以及对指针的外观设置不同。

function drawDynamic() {
    var now = new Date();
    // 时针
    drawNeedle(now.getHours(), now.getMinutes(), 12, r * 0.5, 3, "#000000");
    // 分针
    drawNeedle(now.getMinutes(), now.getSeconds(), 60, r * 0.65, 2, "#000000");
    // 秒针
    drawNeedle(now.getSeconds(), 0, 60, r * 0.7, 1, "#ff0a11");
}

function drawNeedle(final, rest, scale, length, width, color) {
    final = final + rest / 60;
    context.save();
    context.beginPath();
    context.rotate(2 * Math.PI / scale * final);
    context.lineWidth = width;
    context.strokeStyle = color;
    context.moveTo(0, 0);
    context.lineTo(0, -length);
    context.stroke();
    context.closePath();
    context.restore();
}

OK,钟表绘制完成。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券