Suck the cat with code! This article is participating in [Cat essay Activity]

preface

I grew up watching Doraemon. When I was young, I always thought doraemon was around me and often drew doraemon in textbooks. However, my drawing skills were limited and it was really difficult to be seen. Now, I’m going to try it again, but this time I’m going to do it in CSS, just to remind you of my childhood. So today we are going to talk about Canvas.

The plot

2D drawing context has built-in support for manipulating images. If you want to draw an existing image onto the canvas, you can use the drawImage () method. This method can take three different sets of parameters and produce different results. The simplest call is to pass in an HTML < img > element and the X and y coordinates that represent the drawing target, resulting in the drawing of the image to the specified location. For example, let image = document.images [0]; Context. DrawImage (image,10,10);

The above code takes the first image in the text and draws it at coordinates (10,10) on the canvas. The resulting image is the same size as the original. If you want to change the size of the drawn image, you can pass in two additional parameters: the target width and the target height. The scaling here affects only the drawn image and does not affect the context transformation matrix. For example: context. drawImage (image,50,10,20,30);

After execution, the image is scaled to 20 pixels wide and 30 pixels high. You can also draw the image to just one area of the context. At this point, you need to provide drawImage () with nine parameters: the image to be drawn, the source image x coordinate, the source image Y coordinate, the source image width, the source image height, the target region X coordinate, the target region Y coordinate, the target region width, and the target region height. The overloaded drawImage () method provides maximum control, such as context.drawimage (image,0,10,50,50,0,100,40,60);

Eventually, only a portion of the original image is drawn onto the canvas. This section starts at (0,10) and is 50 pixels wide and 50 pixels high. When drawn to the canvas, it starts at (0,100) and becomes 40 pixels wide and 60 pixels high.

shadow

Context can automatically generate shadows for existing shapes or paths based on the values of the following properties. ShadowColor: CSS color value that indicates the shadowColor to be drawn. The default is black. Gate shadowOf fsetX: The offset of the shadow relative to the shape or path’s x coordinate. Default is 0. ShadowOffsetY: The offset of the shadow relative to the shape or path’s y-coordinate. The default value is 0. “ShadowBlur” means the amount of blur in the shadow. The default value is 0, indicating no ambiguity. These properties can be read and written by the Context object. As long as you set the appropriate values for these properties before drawing the graph or path, the shadows will be generated automatically. Such as:

Let cont ext = draw. getContext (" 2d "); The context. ShadoWOff В etX = 5; The context. ShadowOff В etY = 5; The context. В hadoWBlur = 4; The context. ShadowColor = "rgba (0,0,0,0.5)"; Cont ext. fi11Style= "#ff0000"; The context. Fi11Rect,10,50,50 (10); Fi11Style = "rgba (0,0,255,1)"; The context. Fi11Rect (30,30,50,50);Copy the code

There are some basic knowledge points I will not explain, the following to look at my drawing of the doraemon.

<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>
Copy the code

This is the eye

.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); // flip horizontally
}
Copy the code

Box-shadow: 2px 2px 2px 1px Rgba (0, 0, 0, 0.2);

Down here is the nose

.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%);
}

/* Light on nose */
.nose .blink {
position: absolute;
top: 5px;
left: 20px;
width: 36px;
height: 22px;
background: #bf5d5c;
border-radius: 80px 30px 44px 20px / 60px 30px 60px 20px;
}
Copy the code

In this way my doraemon will draw. You can also try it.