随着智能手机的普及和互联网前端的发展，对展现的内容样式的要求也趋于优雅过度。下面讲解一下使用canvas画一个简单的下图放大镜图标:
我们把canvas的绘图过程分为: 路径分析 -> 开发
路径分析
首先观察该放大镜图标是由(一个基本上完整的圆形 + 线条)组成，那么就可以由上图放大镜小腿左侧的缺口开始绘制，然后弧度不断变大，画到缺口右侧时开始绘制线性。
开发
canvas开发主要包含html和javascript，没有css。
html结构
在页面上定义canvas元素
javascript结构
要注意的是canvas本身并不能绘制图形，它只是图形的容器，实际需要调用javascript的API进行绘制图形。
canvas语法基础
getContext()
该方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
beginPath()
该方法开始一条路径，或重置当前的路径。
clearRect(）
该方法清空给定矩形内的指定像素。
arc(）
该方法创建弧/曲线。
注意弧度的计算。
lineTo(）
该方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。
stroke()
该方法绘制已定义的路径。
完整javascript代码
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(); 动态绘制放大镜
如果你希望放大镜是线性画出来，需要计算绘制曲线的速度，变化arc的结束弧度和超过一定阈值时lineTo的结束坐标值。在这里，一定要注意控制目标值。
retina屏幕canvas绘制的图形模糊失真锯齿
关于devicePixelRatio，现有屏幕有1、1.5、2(iphone 5s)、2.5和3(iphone plus)。简单点讲就是css中的1px在dPR为2时，会被放大2倍，在dPR为3时，会被放大3倍。要知道canvas不是矢量的，放大会失真。
所以以上代码中绘制出的放大镜在retina屏幕中会失真，解决方案是把画布放大对应的dPR倍，把canvas的实际显示尺寸设置为实际尺寸。
上面的放大镜尺寸是57 * 57，开发移动端网页时，为了在devicePixelRatio = 3下显示不是真，图片显示尺寸是 (57 / 3)px。那么我们使用canvas绘制的时候，其实这个过程就类似于UE画设计稿的过程，FE开发过程类似于canvas的显示。html结构
javascript结构
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();