要在canvas画布上作画，得先有笔。canvas画布提供两种画笔，2d和3d的，这两种笔一眼能瞧出它们的区别。3d笔太昂贵，咱老百姓消费不起，但有一个封装叫 three.js 可以启用3d绘画功能，并有OpenGL和WebGL加持，传说那个头叫轻量级，我瞅了瞅，1.7MB 大小，我勒了个去，这叫肥胖型苗条好不好！嗯，我们只用2d画笔，原生而且天生免费，比九块九包邮的更具魅力。
启用2d画笔，我们需要声明一下，用一个变量代表2d画笔，以后所有的画笔设置、绘制图形等操作都通过这支笔来完成。上一讲，我们的空白canvas画布有个id，id="canv"，我们通过这个id就能轻松拿到2d画笔，一分钱也不用花费：
<canvas id="canv" width="300" height="300"></canvas>
<script>
/* 获取画笔操作权限
ctx 是2d画笔变量名（可以理解为画笔的姓名或别名，反正就是对画笔的一个称呼）
canv 是canvas元素的id名
getContext()是获取canvas画布上下文相关的方法，有2d和3d两种模式
声明 ctx 变量并获值后，一切绘画设置和操作将通过 ctx 完成
*/
let ctx = canv.getContext('2d');
</script>
有了画笔，即使是一头大象，也可以开始作画了。不过大象主要用它自己的象鼻做画笔，只有在需要精致修饰处才用画笔，它的象鼻画笔也许是3d的，反正它可以恣意妄为，作品全都是抽象派风格的，最终作品可能连它自己都看不懂（不过据说它的老师能看得懂）。我们不，我们用性价比高到不能再高的2d画笔，按我们的构想和canvas相关语法规则去绘制现实主义作品，一切条缕清晰并富含思想。现在我们要绘制一个矩形，将来稍加改造说不准它可能就是我们美丽的时钟的指针：
<canvas id="canv" width="300" height="300"></canvas>
<script>
let ctx = canv.getContext('2d'); //画笔
ctx.fillStyle = 'tan'; //画笔填充色
ctx.strokeStyle = 'red'; //画笔描边色
ctx.lineWidth = 4; //线条厚度（描边线）
ctx.strokeRect(10,10,100,20); //绘制描边矩形
ctx.fillRect(10,10,100,20); //绘制填充矩形
</script>
效果如下。代码已有解释，随后我会更详细介绍一些要点：
第5行代码，fillStyle 是画笔的填充样式，用颜色赋值，可以是关键字（如 red）、十六进制（如 #333）、rgb、rgba、hsl、hsla 等等一切浏览器能够接受的颜色值。因为颜色值为字符串，所以用引号包裹起来。
第6行代码，strokeStyle，定义画笔的描边颜色，规范与上行同，不同的是它是用来描边的。
第7行代码，lineWidth，顾名思义，是线条的厚（宽）度，缺省且不进行填充时默认为2的效果，通常可根据需要对它进行设置。这个值会受到填充行为的影响，如果对矩形使用 fillRect 进行了填充，所设置的厚度会被挤占——实际上是被覆盖，上述代码其实是在相同的位置绘制了两个矩形，第一次用描边方式绘制，第二次用填充方式绘制，。
第8行代码，strokeRect 是绘制描边矩形指令，使用 strokeStyle 定义的描边色，缺省时默认黑色，需要四个参数，strokeRect(x,y,w,h); ：
① x : 水平方向起始坐标值（所画矩形的左边缘，相当于HTML元素的left）；
② y : 垂直方向起始坐标值（所画矩形的上边，相当于HTML元素的上边）；
③ w : 矩形宽度（width的缩写）；
④ h : 矩形高度（height的缩写）
代码第9行，fillRect，绘制填充矩形，使用 fillStyle 定义的填充色，默认黑色，所需参数和 strokeRect 一样。
这些属性设定、图形绘制指令（方法），都很容易理解，前提是有一定的英文基础，没有的话查一下词典然后强记下来，同时特别需要注意写法，属性和指令的组合词里，第二个单词的头一个字母必须大写。
至此我们已经成功绘制了一个有描边色和填充色的矩形，但是，时钟的指针应该始于画布的正中央吧？这好办，绘制矩形 strokeRect（x,y,w,h); 时，我们把 x/y 的值都改一改，x 先为 150，y 为150-矩形高度的一半以确保垂直居中，代码为 ctx.strokeRect(150, 140, 100, 20);，矩形的位置不就合适了吗？请看：
不过，上面画布中的矩形现在看上去一点也不像是指针，没关系，它们会变得像指针的，只是现在还不是时候，还有一些重要的问题要处理，处理好后它们就是百分百的时钟指针。
发表于 2024-3-22 20:38
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-3-22 21:13
楼主
发表于 2024-3-23 20:08