{"id":2346,"date":"2017-05-21T10:23:57","date_gmt":"2017-05-21T02:23:57","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2346"},"modified":"2017-05-21T10:23:57","modified_gmt":"2017-05-21T02:23:57","slug":"canvas%e6%8a%98%e7%ba%bf%e5%9b%be%e7%bb%98%e5%88%b6","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2346","title":{"rendered":"canvas\u6298\u7ebf\u56fe\u7ed8\u5236"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n<head lang=\"en\">\r\n    <meta charset=\"UTF-8\">\r\n    <title>\u6298\u7ebf\u56fe<\/title>\r\n    <style>\r\n        canvas{\r\n            border: 1px solid #000;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n     <canvas id=\"canvas\" width=\"600\" height=\"400\"><\/canvas>\r\n\r\n<\/body>\r\n\r\n<script>\r\n    var canvas=document.getElementById('canvas');\r\n    var ctx=canvas.getContext('2d');\r\n\r\n    \/*\u753b\u5e03\u7684\u5bbd\u9ad8*\/\r\n    var w=canvas.width,\r\n        h=canvas.height;\r\n\r\n    \/* \u8d77\u59cb\u70b9\u8ddd\u79bb\u8fb9\u4e0a\u7684\u4f4d\u7f6e*\/\r\n    var padding=20;\r\n\r\n    ctx.moveTo(padding,padding);\r\n    ctx.lineTo(padding,h-padding);\r\n    ctx.lineTo(w-padding,h-padding);\r\n    ctx.stroke();\r\n\r\n    \/*\u7bad\u5934\u7684\u5bbd\u9ad8*\/\r\n    var arrowW=16,\r\n        arrowH=16;\r\n    \/*\u7ad6\u65b9\u5411\u7bad\u5934*\/\r\n    ctx.beginPath();\r\n    ctx.moveTo(padding,padding-arrowH\/2);\r\n    ctx.lineTo(padding-arrowW\/2,padding+arrowH\/2);\r\n    ctx.lineTo(padding,padding);\r\n    ctx.lineTo(padding+arrowW\/2,padding+arrowH\/2);\r\n\r\n    \/*\u6a2a\u5411\u7bad\u5934*\/\r\n    ctx.moveTo(w-padding+arrowW\/2,h-padding);\r\n    ctx.lineTo(w-padding-arrowW\/2,h-padding-arrowH\/2);\r\n    ctx.lineTo(w-padding,h-padding);\r\n    ctx.lineTo(w-padding-arrowW\/2,h-padding+arrowH\/2)\r\n\r\n    ctx.fill();\r\n\r\n    \/*\u5c01\u88c5\u753b\u5c0f\u65b9\u5757\u7684\u51fd\u6570*\/\r\n    function drawPoint(x,y,r,color){\r\n        r=r||8;\r\n        color=color||'#000';\r\n        ctx.beginPath();\r\n        ctx.moveTo(x-r,y-r);\r\n        ctx.lineTo(x+r,y-r);\r\n        ctx.lineTo(x+r,y+r);\r\n        ctx.lineTo(x-r,y+r);\r\n        ctx.fillStyle=color;\r\n        ctx.fill();\r\n    }\r\n\/\/    drawPoint(40,40);\r\n   \/*\u6bcf\u4e2a\u5c0f\u65b9\u5757\u7684\u4f4d\u7f6e*\/\r\n    var points=[ [20,80],[40,1200],[80,80],[200,300],[400,150] ];\r\n\r\n    var x0=padding,\r\n        y0=h-padding;\r\n\r\n    \/*\u8ba9\u6bcf\u4e2a\u5c0f\u65b9\u5757\u7684\u4f4d\u7f6e\u6309\u7167points[0][0]\u7684\u5927\u5c0f\u6392\u5217*\/\r\n    points.sort(function(a,b){\r\n        return a[0]-b[0];\r\n    })\r\n\r\n    \/*\u83b7\u53d6\u5750\u6807\u8f74\u7684\u6709\u6548\u957f\u5ea6*\/\r\n    var xLength=w-2*padding-arrowW;\r\n    var yLength=h-2*padding-arrowH;\r\n\r\n    \/*\u6c42\u51fay\u5750\u6807\u7684\u6700\u5927\u503c*\/\r\n    var yMax=Math.max.apply(null,points.map(function(ele){\r\n        return ele[1];\r\n    }))\r\n    console.log(yMax);\r\n\r\n    \/*\u6c42\u51fax\u5750\u6807\u7684\u6700\u5927\u503c*\/\r\n    var xMax=points[points.length-1][0];\r\n    console.log(xMax);\r\n\r\n\r\n    \/* \u8ba9\u6bcf\u4e00\u4e2a\u5c0f\u65b9\u5757\u7684\u4f4d\u7f6e*\/\r\n\r\n    var renderPoints=points.map(function(ele){\r\n        var x,y;\r\n        \/*\u7f29\u653e\u5750\u6807\u70b9*\/\r\n        x=ele[0]*xLength\/xMax;\r\n        y=ele[1]*yLength\/yMax;\r\n        \/*\u5750\u6807\u7cfb\u539f\u70b9\u53d8\u6362*\/\r\n        x+=x0;\r\n        y=y0-y;\r\n\r\n          return [x,y];\r\n    })\r\n    console.log(renderPoints);\r\n\r\n    \/*\u7ed9\u6bcf\u4e2a\u5c0f\u65b9\u5757\u6dfb\u52a0\u5230\u6bcf\u4e00\u4e2a\u4f4d\u7f6e\u53bb*\/\r\n    renderPoints.forEach(function(ele){\r\n        drawPoint(ele[0],ele[1],6,'#daa50');\r\n    })\r\n\r\n    \/*\u5f00\u59cb\u8fde\u7ebf*\/\r\n    ctx.beginPath();\r\n    ctx.strokeStyle='red';\r\n    ctx.moveTo(renderPoints[0][0],renderPoints[0][1]);\r\n\r\n    renderPoints.forEach(function(ele,i){\r\n        if(i!=0){\r\n            ctx.lineTo(ele[0],ele[1]);\r\n            ctx.stroke();\r\n        }\r\n    })\r\n\r\n<\/script>\r\n\r\n<\/html><\/pre>\n
\"\"<\/p>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » canvas\u6298\u7ebf\u56fe\u7ed8\u5236<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head lang=”en”> <meta charset=”UTF-8″> <title> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,9,335],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2346"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2346"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2346\/revisions"}],"predecessor-version":[{"id":2348,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2346\/revisions\/2348"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2346"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}