{"id":1997,"date":"2017-04-09T16:01:07","date_gmt":"2017-04-09T08:01:07","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=1997"},"modified":"2017-04-09T16:01:07","modified_gmt":"2017-04-09T08:01:07","slug":"canvas%e5%ae%9e%e7%8e%b0%e6%89%8b%e6%9c%ba%e7%ab%af%e5%88%ae%e5%88%ae%e4%b9%90","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=1997","title":{"rendered":"canvas\u5b9e\u73b0\u624b\u673a\u7aef\u522e\u522e\u4e50"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n\t<meta charset=\"UTF-8\">\r\n\t<meta name=\"viewport\" content=\"initial-scale=1.0,user-scalable=no\">\r\n  \t<title>canvas beginePath example<\/title>\r\n  \t<script src=\"https:\/\/code.jquery.com\/jquery-3.2.1.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n<div style=\"position:relative;\">\r\n\t<div style=\"width:300px;height:200px;text-align:center;vertical-align:middle;background-color:#fbda61;\">\r\n\t\t<p style=\"line-height:200px;color:#FFF;font-size:16px;\">\u8c22\u8c22\u60e0\u987e<\/p>\r\n\t<\/div>\r\n    <canvas id=\"demo\" width=\"300\" height=\"200\" style=\"position:absolute;top:0;\">canvas-unsupported code here<\/canvas>\r\n<\/div>\r\n\t\r\n<\/body>\r\n <script>\r\n    var canvasEle = document.getElementById(\"demo\");\r\n    var ctx = document.getElementById(\"demo\").getContext(\"2d\"); \/\/\u5f97\u5230\u753b\u5e03\r\n    var ctxWidth = canvasEle.offsetWidth; \/\/\u83b7\u53d6canvasEle\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\r\n    var ctxHeight = canvasEle.offsetHeight;\r\n    \r\n    ctx.beginPath();\r\n    ctx.fillStyle =\"#d8d8d8\"; \/\/\u586b\u5145\u989c\u8272\r\n    ctx.fillRect(0,0,ctxWidth, ctxHeight);\/\/\u753b\u77e9\u5f62\r\n    ctx.closePath();\r\n\r\n    ctx.font =\"30px Arial\"; \/\/\u5b57\u4f53\u5927\u5c0f\u548cfamily\r\n    ctx.fillStyle =\"#A79485\"; \/\/\u5b57\u4f53\u989c\u8272\r\n    ctx.textBaseline = \"middle\"; \/\/\u8bbe\u7f6e\u5b57\u4f53\u57fa\u7ebf\r\n    ctx.textAlign = \"center\"; \/\/\u5b57\u4f53\u6c34\u5e73\u5c45\u4e2d\r\n    ctx.fillText(\"Draw a lottery\", ctxWidth\/2, ctxHeight\/2);\r\n\r\n    var area = ctxWidth * ctxHeight;\r\n    l = canvasEle.offsetLeft;\r\n    t = canvasEle.offsetTop;\r\n\r\n\r\n    \/*\u7ed1\u5b9a\u89e6\u6478\u5c4f\u5e55\u4e8b\u4ef6*\/\r\n    var bindEvent = function(){\r\n        canvasEle.addEventListener('touchstart',startFunc,false);\r\n        canvasEle.addEventListener('touchmove', moveFunc, false);\r\n        canvasEle.addEventListener('touchend', endFunc, false);\r\n    };\r\n     var firstFlag = true;\r\n    var startFunc = function(){\r\n    \tif(firstFlag){\r\n    \t\tconsole.log(\"\u9996\u6b21\u89e6\u5c4f\u65f6\u53d1\u751f\u7684\u51fd\u6570,\u53ef\u4ee5\u5728\u8fd9\u91cc\u8bf7\u6c42\u540e\u53f0\u62ff\u5230\u5956\u5238\u7684\u6570\u636e\");\r\n    \t}\r\n    };\r\n    var moveFunc = function(e){\r\n\t\t  var touch = e.touches[0],\r\n\t                posX = touch.clientX - l,\r\n\t                posY = touch.clientY - t;\r\n\t        ctx.beginPath();\r\n\t        ctx.arc(posX, posY, 15, 0, Math.PI * 2, 0);\r\n\t        ctx.fill();\r\n    };\r\n\tvar endFunc = function(){\r\n\t    var data = ctx.getImageData(0, 0, ctxWidth, ctxHeight).data,\r\n\t            scrapeNum = 0;\r\n\t    for(var i = 3, len = data.length; i < len; i += 4){\r\n\t        if(data[i] === 0){\r\n\t            scrapeNum++;\r\n\t        }\r\n\t    }\r\n\t    if(scrapeNum > area * 0.3){ \/\/\u522e\u6389\u9762\u79ef\u5927\u4e8e\u67d0\u4e2a\u503c\u65f6 \u5168\u90e8\u6e05\u9664\r\n\t        ctx.clearRect(0, 0, ctxWidth, ctxHeight);\r\n\t        canvasEle.removeEventListener('touchmove', moveFunc, false);\r\n\t        canvasEle.removeEventListener('touchend', endFunc, false);\r\n\t    }\r\n\t}\r\n\r\n\t $(document).ready(function () {\r\n        ctx.globalCompositeOperation = 'destination-out';\r\n        bindEvent();\r\n    });\r\n    <\/script>\r\n<\/html><\/pre>\n
1.\u8fd9\u91cc\u503c\u5f97\u6ce8\u610f\u7684\u662f canvas\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u5fc5\u987b\u5355\u72ec\u5199\uff0c\u5199\u5728style\u4e0b\u662f\u4e0d\u884c\u7684\u3002\u7528offsetWidth\uff0coffsetHeight\u83b7\u53d6\u5bbd\u9ad8\u5ea6\uff1b
\n2.\u53ef\u4ee5\u5728startFunc\u91cc\u9762\u8c03\u7528\u63a5\u53e3 \u83b7\u53d6\u5956\u5238\u7684\u4fe1\u606f\uff1b
\n3.\u5728\u77e9\u5f62\u4e0a\u7ed8\u5236\u6587\u672c\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\uff0cfillText(text,x,y,maxWidth);x\uff0cy\u4e24\u4e2a\u53c2\u6570\u662f\u8bbe\u7f6e\u76f8\u5bf9\u4e8e\u753b\u5e03\u7684x\uff0cy\u5750\u6807\uff0c\u518d\u7528textBaseline\uff0ctextAlign\u8bbe\u7f6e\u5c45\u4e2d\u5373\u53ef\uff1b
\n4.\u672c\u6587\u522e\u522e\u4e50\u7684\u4e3b\u8981\u601d\u60f3\u662f \u9875\u9762\u521d\u59cb\u5316\u65f6\u5148\u7528\u4e00\u4e2adiv\u653e\u5728canvas\u7684\u4e0b\u9762\uff0c\u8bbe\u7f6e\u597d\u6837\u5f0f\uff0c\u8fdb\u884c\u9690\u85cf\uff0ccanvas\u653e\u5728\u4e0a\u9762\uff1b\u9996\u6b21\u89e6\u5c4f\u65f6 \u8bf7\u6c42\u63a5\u53e3 \u66ff\u6362\u5956\u5238\u6570\u636e\uff0c\u5f53\u522e\u6389\u9762\u79ef\u8d85\u8fc7\u67d0\u4e2a\u503c\u65f6\uff0c\u81ea\u52a8\u6e05\u9664\u6240\u6709\uff1b
\n5.\u6d4f\u89c8\u5668\u9700\u8981\u5728\u624b\u673a\u6a21\u5f0f\u4e0b\u624d\u80fd\u770b\u5230\u6548\u679c\u3002<\/p>\n
\u603b\u4e4b\uff0c\u672c\u6587\u4ec5\u4f9b\u53c2\u8003\uff0c\u5982\u6709\u4e0d\u8db3\u4e4b\u5904\uff0c\u8bf7\u6307\u6b63\u3002<\/p>\n
 <\/p>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » canvas\u5b9e\u73b0\u624b\u673a\u7aef\u522e\u522e\u4e50<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name […]<\/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],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1997"}],"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=1997"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1997\/revisions"}],"predecessor-version":[{"id":1998,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1997\/revisions\/1998"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1997"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}