The first attempt of canvas: drawing magnifier Icon

Time:2021-7-18

With the popularity of smart phones and the development of Internet front-end, the requirements of content style are becoming too elegant. Here’s how to use canvas to draw a simple magnifying glass icon:

The first attempt of canvas: drawing magnifier Icon

We divide the drawing process of canvas into path analysis and development

path analysis

First observe that the magnifying glass icon is composed of (a basically complete circle + line), then you can start to draw from the notch on the left side of the lower leg of the magnifying glass in the figure above, and then the radian becomes larger and larger, and start to draw linear when you draw to the right side of the notch.

development

Canvas development mainly includes HTML and JavaScript, without CSS.Demo address

HTML structure

Define the canvas element on the page

<canvas id="canvas" width="19x" height="19px"></canvas>

JavaScript structure

It should be noted that canvas itself can’t draw graphics, it’s just a container of graphics. In fact, you need to call JavaScript API to draw graphics.

Basic grammar of canvas

getContext()

This method returns an object that provides methods and properties for drawing on the canvas.

beginPath()

This method starts a path, or resets the current path.

clearRect()

This method empties the specified pixels in the given rectangle.

arc()

This method creates arcs / curves.

Pay attention to the calculation of radian.

The first attempt of canvas: drawing magnifier Icon

lineTo()

This method adds a new point and then creates a line from that point to the last specified point in the canvas (this method does not create a line).

stroke()

This method draws a defined path.

Complete JavaScript code

var ctx = document.querySelector('#canvas').getContext('2d');
ctx.strokeStyle = '#f00';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.clearRect(0, 0, 19, 19);
ctx.arc(9, 9, 8, 0.37 * Math.PI, 2.27 * Math.PI, false);
ctx.lineTo(19, 19);
ctx.stroke();

Dynamic rendering magnifier

If you want the magnifying glass to be drawn linearly, you need to calculate the speed of drawing the curve, the end radian of arc and the end coordinate value of lineto when it exceeds a certain threshold. Here, we must pay attention to control the target value.

Blurred and distorted graphics drawn by retina screen canvas

For device pixel ratio, the existing screens are 1, 1.5, 2 (iPhone 5S), 2.5 and 3 (iPhone plus). To put it simply, 1px in CSS will be magnified twice when DPR is 2, and it will be magnified three times when DPR is 3. You should know that canvas is not vector, and the amplification will be distorted.

So the magnifier drawn in the above code will be distorted in retina screen. The solution is to enlarge the canvas by the corresponding DPR times, and set the actual display size of canvas to the actual size.
The size of the magnifying glass above is 57 * 57. When developing mobile web pages, in order to display untrue images under devicepixelratio = 3, the image display size is (57 / 3) px. When we use canvas to draw, in fact, this process is similar to the process of UE drawing design draft, and the Fe development process is similar to the display of canvas.

HTML structure

<canvas id="canvas2" width="19x" height="19px"></canvas>

JavaScript structure

var getPixelRatio = function(context) {
        var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;

        return (window.devicePixelRatio || 1) / backingStore;
};

var retinaDraw = function () {
  var canvasDomEle = document.querySelector('#canvas2');
  var ctx2 = canvasDomEle.getContext('2d');
  var ratio = getPixelRatio(ctx2);
  console.log(ratio);
  
  canvasDomEle.style.width = 19 + "px";
  canvasDomEle.style.height = 19 + "px";
  canvasDomEle.height = 19 * ratio;
  canvasDomEle.width = 19 * ratio;
  
  ctx2.strokeStyle = '#0f0';
  ctx2.lineWidth = 1 * ratio;
  ctx2.beginPath();
  ctx2.clearRect(0, 0, 19 * ratio, 19 * ratio);
  ctx2.arc(9 * ratio, 9 * ratio, 8 * ratio, 0.37 * Math.PI, 2.27 * Math.PI, false);
  ctx2.lineTo(19 * ratio, 19 * ratio);
  ctx2.stroke();
}
retinaDraw();

Recommended Today

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]