vue3中使用 HTML5 Canvas 做一个案例总结笔记

        这篇文章记录了在vue3中如何使用HTML5 Canvas做一个时钟的案例, 当然主要是HTML5 Canvas, 如何需要了解更多关于vue的知识前面也已经写过好几篇了,辛苦翻一下的...

        开始写代码之前我们先来了解一下关于HTML5 Canvas 的基础知识

目录

一 .基础知识

1.了解canvas

1.1 基本用法

 1.2 简单例子

2.绘制形状

3.绘制路径

3.1 绘制圆弧

4.添加样式和颜色

二.案例

1.结果展示 

---

一 .基础知识

1.了解canvas

​<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

1.1 基本用法

<canvas id="myCanvas" width="300" height="300"></canvas>

<canvas></canvas> 是双标签, 可以设置宽高属性的大小,默认是width=300 height=150 

如果对于一些老旧的浏览器,不支持canvas的会显示提示信息

<canvas>
    你的浏览器不支持 canvas，请升级你的浏览器。
</canvas>

canvas标签也可以使用<img /> 标签

<canvas>
    <img src="./pig.jpg" alt=""> 
</canvas>

渲染上下文

var canvas = document.getElementById('myCanvas');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');

检测可用性

function draw(){
    var canvas = document.getElementById('myCanvas');
    if(!canvas.getContext) return;// 判断浏览器是否支持
      var ctx = canvas.getContext("2d");
      //开始代码
}

 1.2 简单例子

用上面的知识我们已经可以完成一个简单的例子了

<canvas id="myCanvas" width="300" height="300"></canvas>
<script type="text/javascript">
function draw(){
    var canvas = document.getElementById('myCanvas');
    if(!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(200,0,0)";
      //绘制矩形
    ctx.fillRect (10, 10, 55, 50);
 
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
}
draw();
</script>

2.绘制形