使用Canvas画机器猫

一起用代码吸猫！本文正在参与【喵星人征文活动】

前言

从小我都是看哆啦A梦长大的，小时候我就想机器猫在我身边，也经常会在课本上画她，奈何我的画画技术有限，实在难以入目。现在，我再来尝试一番，不过这次我用的是css来画，来回忆一下我的童年吧。所以今天我们来谈一谈Canvas。

绘制图像

2D绘图上下文内置支持操作图像。如果想把现有图像绘制到画布上,可以使用 drawImage ()方法。这个方法可以接收3组不同的参数,并产生不同的结果。最简单的调用是传人一个 HTML 的< img >元素,以及表示绘制目标的 x 和 y 坐标,结果是把图像绘制到指定位置。比如:
let image = document . images [0]; context . drawImage ( image ,10,10);

以上代码获取了文本中的第一个图像,然后在画布上的坐标(10,10)处将它绘制了出来。绘制出来的图像与原来的图像一样大。如果想改变所绘制图像的大小,可以再传人另外两个参数:目标宽度和目标高度。这里的缩放只影响绘制的图像,不影响上下文的变换矩阵。比如下面的例子:
context . drawImage ( image ,50,10,20,30);

执行之后,图像会缩放到20像素宽、30像素高。
还可以只把图像绘制到上下文中的一个区域。此时,需要给 drawImage ()提供9个参数:要绘制的图像、源图像 x 坐标、源图像 y 坐标、源图像宽度、源图像高度、目标区域 x 坐标、目标区域 y 坐标、目标区域宽度和目标区域高度。这个重载后的 drawImage ()方法可以实现最大限度的控制,比如:
context . drawImage ( image ,0,10,50,50,0,100,40,60);

最终,原始图像中只有一部分会绘制到画布上。这一部分从(0,10)开始,50像素宽、50像素高。而
绘制到画布上时,会从(0,100)开始,变成40像素宽、60像素高。

阴影

上下文可以根据以下属性的值自动为已有形状或路径生成阴影。
shadowColor : CSS 颜色值,表示要绘制的阴影颜色,默认为黑色。
门 shadowOf fsetX :阴影相对于形状或路径的 x 坐标的偏移量,默认为0。  shadowOffsetY :阴影相对于形状或路径的 y 坐标的偏移量,默认为0。
shadowBlur :像素,表示阴影的模糊量。默认值为0,表示不模糊。
这些属性都可以通过 context 对象读写。只要在绘制图形或路径前给这些属性设置好适当的值,
阴影就会自动生成。比如:

let cont ext = draWing . getContext (＂2d＂);
 context 。 shadoWOff В etX =5; context 。 shadowOff В etY =5; context 。В hadoWBlur =4;
 context 。 shadowColor =＂ rgba (0,0,0,0.5)＂;
//绘制红色矩形
 cont ext .fi11Style=＂#ff0000＂; context .fi11Rect(10,10,50,50);/绘制蓝色矩形
 context .fi11Style=＂ rgba (0,0,255,1)＂; context .fi11Rect(30,30,50,50);

还有一些基础的知识点我就不多进行讲解，下面给大家看一下我画的机器猫吧。

<div class='eye eye-left'>
<div class='pupil'>
<div class='pupil-mask'></div>
<div class='pupil-middle'></div>
<div class='pupil-small'></div>
<div class='tear-top'></div>
<div class='tear-bottom'></div>
</div>
</div>
<div class='eye eye-right mirror'>
<div class='pupil mirror'>
<div class='pupil-mask'></div>
<div class='pupil-middle'></div>
<div class='pupil-small'></div>
<div class='tear-top'></div>
<div class='tear-bottom'></div>
</div>
</div>

这是眼睛部分

.eye {
position: absolute;
top: 38px;
width: 136px;
height: 136px;
border-radius: 100px 60px 100px 70px / 100px 60px 100px 70px;
border: 2px solid #7f888f;
background: #fff;
}

.eye.eye-left {
left: 104px;
}

.eye.eye-right {
right: 104px;
}

.mirror {
transform: rotateY(180deg); // 水平翻转
}

鼻子的立体效果 box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

下面是鼻子部分

.nose {
position: absolute;
top: 127px;
left: 50%;
transform: translate(-50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: #ae3537;
box-shadow: 2px 30px 18px -8px rgb(0 0 0 / 33%);
}

/* 鼻子上的光 */
.nose .blink {
position: absolute;
top: 5px;
left: 20px;
width: 36px;
height: 22px;
background: #bf5d5c;
border-radius: 80px 30px 44px 20px / 60px 30px 60px 20px;
}

这样子我的机器猫就画好了。 大家也可以去试试吧。