canvas-基础学习--钟表绘制

最新推荐文章于 2024-08-04 11:18:11 发布

二哈汪汪叫

最新推荐文章于 2024-08-04 11:18:11 发布

阅读量243

点赞数

文章标签： canvas html5

本文链接：https://blog.csdn.net/wei1273356078/article/details/107426225

版权

什么是 canvas?

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，必须使用脚本来绘制图形。
可以通过多种方法使用 canvas 绘制路径盒、圆、字符以及添加图像。
简单来说就是一块画布，需要自己对<canvas>标签设置宽高<canvas width="200" height="100"></canvas>，之后使用样式定位什么的，最后需要使用 js 来对它进行绘制。

canvas的一些方法属性

描边：stroke
- ctx.strokeRect(x, y, w, h) ：画矩形（正方形是特殊矩形）
- ctx.beginPath(); ：开始绘制路径（要有开始的路径）
- ctx.moveTo(x, y) ：从哪里开始画（与下面的配合使用）
- ctx.lineTo(x, y) ：到哪里结束
- ctx.closePath() ：闭合路径（一般用于不规则图形时用）
- ctx.arc(x, y, radius, starAngle, endAngle) ：画弧线（角度使用 Math.PI 代表180度）
- ctx.lineWidth ：表示描边的粗细
- ctx.strokeText(string, x, y) ：表示文本描边
- ctx.strokeStyle ：表示描边的颜色
- ctx.stroke() ：上面的准备工作做完，开始正式画（渲染）
填充：fill
- 与描边一样，只是这个是内容的填充

画笔的一些方法：
- ctx.font(size, type) ：设置字体大小和类型（两个参数必须要有）
- ctx.textAlign ：设置水平居中
- ctx.textBaseline ：设置垂直居中
- ctx.rotate(angle) ：设置坐标轴旋转的角度
- ctx.translate(x, y) ：设置坐标轴的位置（默认是画布的左上角）
- ctx.save() ：记录当前坐标系的设定(不懂等会看最后的钟表实例)
- ctx.restore() ：将坐标系恢复最近一次的save (使用一次恢复，就消耗一次save，要想使用save就需要重新记录)\
- ctx.drawImage(image, x, y)：将图片放在画布上

渐变的使用

addColorStop(n, color)：指定颜色停止，n可以是0至1.

ctx.createLinearGradient(x, y, x1, y1)：线性渐变

x, y 表示渐变开始点的 x y 坐标
x1, y1 表示渐变结束点的 x1 y1 坐标

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// 填充渐变
// 可以把内容填充改为描边填充
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

在这里插入图片描述

ctx.createRadialGradient(x, y, r, x1, y1, r1)：径向渐变

x, y 表示渐变的开始圆的 x y 坐标
r, r1 表示开始与结束圆的半径
x1, y1 表示渐变结束圆的 x1 y1 的坐标

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 先创建好径向渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// 填充内容渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

在这里插入图片描述

钟表代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      canvas {
        display: block;
        /* background-color: #eee; */
        margin: 100px auto;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <canvas width="500" height="500"></canvas>

    <script>
      // 获取画布
      let canvas = document.querySelector('canvas')
      // 获取画笔
      let ctx = canvas.getContext('2d')
      // 平移坐标系
      ctx.translate(250, 250)
      // 画表盘
      ctx.arc(0, 0, 240, 0, Math.PI * 2)
      ctx.stroke()
      // 画刻度
      for (let i = 0; i < 60; i++) {
        ctx.beginPath()
        ctx.moveTo(i % 5 === 0 ? 210 : 225, 0)
        ctx.lineTo(240, 0)
        ctx.lineWidth = i % 5 === 0 ? 4 : 2
        ctx.stroke()
        ctx.rotate(Math.PI / 30)
      }
      // 画字
      // 设置字体
      ctx.font = '30px Arial'
      // 设置水平居中
      ctx.textAlign = 'center'
      // 设置垂直居中
      ctx.textBaseline = 'middle'
      // 设置文本
      ctx.strokeText('12', 0, -190)
      ctx.strokeText('3', 190, 0)
      ctx.strokeText('6', 0, 190)
      ctx.strokeText('9', -190, 0)
      // 将坐标轴逆时针旋转90度 方便指针操作
      ctx.rotate(-Math.PI / 2)
      // 保存当前坐标系的设定
      ctx.save()
      // 对时分秒指针的操作
      function aTime() {
        // 擦除（填充）
        ctx.beginPath()
        // 设置填充样式颜色
        ctx.fillStyle = '#fff'
        ctx.arc(0, 0, 150, 0, Math.PI * 2)
        // 填充
        ctx.fill()
        // 获取时间
        let time = new Date()
        let hour = time.getHours()
        let minutes = time.getMinutes()
        let seconds = time.getSeconds()
        // 时针
        ctx.rotate(hour * (Math.PI / 6) + minutes / 60 * Math.PI / 6)
        ctx.beginPath();
        ctx.moveTo(-20, 0);
        ctx.lineTo(100, 0);
        ctx.lineWidth = 8;
        ctx.strokeStyle = 'black';
        ctx.stroke()
        // restore重置一次会消耗一次save
        ctx.restore()
        ctx.save()
        console.log(hour);
        // 分针
        ctx.rotate(minutes * (Math.PI / 30) + seconds / 60 * Math.PI / 30)
        ctx.beginPath()
        ctx.moveTo(-35, 0)
        ctx.lineTo(120, 0)
        ctx.lineWidth = 4
        ctx.strokeStyle = 'cyan'
        ctx.stroke()
        // restore重置一次会消耗一次save
        ctx.restore()
        ctx.save()
        // 秒针
        ctx.rotate(seconds * (Math.PI / 30))
        ctx.beginPath()
        ctx.moveTo(-50, 0)
        ctx.lineTo(150, 0)
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'red'
        ctx.stroke()
        // restore重置一次会消耗一次save
        ctx.restore()
        ctx.save()
        // 设置圆心轴
        ctx.beginPath()
        ctx.arc(0, 0, 10, 0, Math.PI * 2)
        ctx.lineWidth = 6
        ctx.strokeStyle = 'gold'
        ctx.stroke()
        ctx.fillStyle = '#eee'
        // 填充
        ctx.fill()
      }
      setInterval(aTime, 1000)
    </script>
  </body>
</html>

二哈汪汪叫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas-基础学习--钟表绘制

什么是 canvas?HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器，必须使用脚本来绘制图形。可以通过多种方法使用 canvas 绘制路径盒、圆、字符以及添加图像。简单来说就是一块画布，需要自己对<canvas>标签设置宽高<canvas width="200" height="100"></canvas>，之后使用样式定位什么的，最后需要使用 js 来
复制链接

扫一扫