一个简单的实例
<head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>手写签名2</title> <style> body { margin: 0; } #cvs { display: block; background-color: #dddddd; } .btn { position: absolute; top: 0; } .p2 { left: 50px } </style> </head> <body> <button class=”btn” onclick=”onRotate()”>旋转</button> <button class=”btn p2″ onclick=”onDownload()”>下载</button> <canvas id=”cvs” width=”400″ height=”300″></canvas> <script> const cvs = document.getElementById(‘cvs’) const ctx = cvs.getContext(‘2d’) let isDrawing = false const onRotate = () => { const { width, height } = cvs const img = new Image() img.src = cvs.toDataURL(‘image/png’) img.onload = () => { cvs.width = height cvs.height = width ctx.translate(cvs.width, 0) ctx.rotate(Math.PI / 180 * 90) ctx.drawImage(img, 0, 0) } } const onDownload = async () => { const a = document.createElement(‘a’) a.setAttribute(‘download’, ‘name.png’) const res = await fetch(cvs.toDataURL(‘image/png’)) const blob = await res.blob() a.href = URL.createObjectURL(blob) a.click() } const addEvents = (cvs, name, call) => { const isMobile = navigator.userAgent.match(/Mobile/) const mobileNameObj = { ‘mousedown’: ‘touchstart’, ‘mousemove’: ‘touchmove’, ‘mouseup’: ‘touchend’ } if (isMobile) { cvs.addEventListener(mobileNameObj[name], e => { call(e.touches[0]) }) } else { cvs.addEventListener(name, e => { call(e) }) } } addEvents(cvs, ‘mousedown’, e => { isDrawing = true ctx.moveTo(e.pageX, e.pageY) }) addEvents(cvs, ‘mousemove’, e => { if (isDrawing) { ctx.lineWidth = 5 ctx.lineTo(e.pageX, e.pageY) ctx.stroke() } }) addEvents(cvs, ‘mouseup’, e => { isDrawing = false }) </script> </body>
原文地址：http://www.cnblogs.com/Tanguncle/p/16928385.html
