{"rsdb":{"rid":"377587","subhead":"","postdate":"0","aid":"264211","fid":"107","uid":"1","topic":"1","content":"
\n

\u524d\u8a00:<\/p> \n

\u3000\u3000canvas\u53ef\u4ee5\u5355\u72ec\u7b97\u4e3a\u524d\u7aef\u7684\u4e00\u5927\u77e5\u8bc6\u6a21\u5757, \u4eca\u5929\u5c31\u7814\u7a76\u4e00\u4e0b.<\/p> \n

\u3000\u3000\u5148\u505a\u4e0b\u524d\u6587\u94fa\u57ab:<\/p> \n

\u3000\u3000\u3000\u3000\u2460\u521b\u5efacanvas<\/p> \n

\n 
<<\/span>canvas <\/span>id<\/span>="myCanvas"<\/span> width<\/span>="200"<\/span> height<\/span>="100"<\/span> style<\/span>="border:1px solid #000000;"<\/span>><\/<\/span>canvas<\/span>><\/span><\/pre> \n <\/div> \n 
\u3000\u3000\u3000\u3000\u2461\u83b7\u53d6canvas<\/p> \n 
 \n  
    var<\/span> cavs = document.getElementById("cavs");           \/\/<\/span>\u83b7\u53d6canvas<\/span>\r\n    var<\/span> ctx = cavs.getContext("2d");                     \/\/<\/span>\u53ef\u4ee5\u7406\u89e3\u4e3a\u751f\u6210\u4e00\u4e2a2d\u753b\u7b14<\/span>\r\n        ctx.moveTo(100, 100);                           \/\/<\/span>\u843d\u7b14\u70b9<\/span>\r\n        ctx.lineTo(200, 200);                          \/\/<\/span>\u7ed3\u675f\u70b9<\/span><\/pre> \n <\/div> \n 
\u3000\u3000\u3000\u3000\u2462\u5e38\u7528\u6837\u5f0f<\/p> \n 
 \n  
         ctx.strokeStyle = "#f00"                 \/\/<\/span>\u7ebf\u6761\u7684\u989c\u82722<\/span>\r\n         ctx.lineWidth = 10;                    \/\/<\/span>\u7ebf\u6761\u7c97\u7ec6<\/span><\/pre> \n <\/div> \n 
\u3000\u3000\u3000\u3000\u2463\u7ed8\u5236\u7ebf\u6761<\/p> \n 
 \n  
\u3000\u3000\u3000\u3000\u3000 ctx.stroke();            \/\/<\/span>\u7ed8\u5236\u7ebf\u6761<\/span><\/pre> \n <\/div> \n 
\u3000\u3000\u3000\u3000\u2464\u586b\u5145\u56fe\u6848<\/p> \n 
 \n  
\u3000\u3000\u3000\u3000\u3000ctx.fillStyle = "yellow";            \/\/<\/span>\u586b\u5145\u989c\u8272
<\/span>\u3000\u3000\u3000\u3000\u3000ctx.fill();                <\/span>\/\/<\/span>\u8fdb\u884c\u586b\u5145<\/span><\/pre> \n <\/div> \n 
\u3000\u3000\u3000\u3000\u2465\u5f00\u59cb\u7ed3\u675f<\/p> \n 
 \n  
         ctx.beginPath();    \/\/<\/span>\u5f00\u59cb<\/span>\r\n         ctx.closePath();    \/\/<\/span>\u7ed3\u675f<\/span><\/pre> \n <\/div> \n 
\u3000\u3000\u3000\u3000\u2466\u5176\u4ed6<\/p> \n 
 \n  
         var<\/span> img = ctx.getImageData(x, y, width, height);     \/\/<\/span>\u622a\u53d6canvas\u4e2d\u56fe\u6848<\/span>\r\n         ctx.putImageData(img, width, height)            \/\/\u5c06img<\/span>\u653e\u5230canvas\u4e2d<\/span>\r\n         ctx.clearRect(x,y,canvas.width,canvas.height)         \/\/<\/span>\u6e05\u9664\u753b\u5e03<\/span><\/pre> \n <\/div> \n 
 <\/p> \n 
\u6b63\u6587:<\/p> \n 
\u3000\u3000\u8bf4\u518d\u591a\u4e5f\u6ca1\u7528, \u6700\u7ec8\u8fd8\u662f\u8fdb\u884c\u5b9e\u6218, \u7ec8\u4e8e\u8fdb\u5165\u6b63\u6587\u4e86;<\/p> \n 
\u3000\u3000HTML\u90e8\u5206<\/p> \n 
 \n  
<<\/span>div <\/span>class<\/span>="wrapper"<\/span>><\/span>\r\n    <<\/span>canvas <\/span>id<\/span>="cavs"<\/span> width<\/span>="1000"<\/span> height<\/span>="500"<\/span>><\/<\/span>canvas<\/span>><\/span>\r\n    <<\/span>ul <\/span>class<\/span>="btn-list"<\/span>><\/span>\r\n        <<\/span>li<\/span>><<\/span>input <\/span>type<\/span>="color"<\/span> id<\/span>="colorBoard"<\/span>><\/<\/span>li<\/span>><\/span>\r\n        <<\/span>li<\/span>><<\/span>input <\/span>type<\/span>="button"<\/span> id<\/span>="cleanBoard"<\/span> value<\/span>="\u6e05\u5c4f"<\/span>><\/<\/span>li<\/span>><\/span>\r\n        <<\/span>li<\/span>><<\/span>input <\/span>type<\/span>="button"<\/span> id<\/span>="eraser"<\/span> value<\/span>="\u6a61\u76ae"<\/span>><\/<\/span>li<\/span>><\/span>\r\n        <<\/span>li<\/span>><<\/span>input <\/span>type<\/span>="button"<\/span> id<\/span>="rescind"<\/span> value<\/span>="\u64a4\u9500"<\/span>><\/<\/span>li<\/span>><\/span>\r\n        <<\/span>li<\/span>><<\/span>input <\/span>type<\/span>="range"<\/span> id<\/span>="lineRuler"<\/span> value<\/span>="\u7ebf\u6761"<\/span> min<\/span>="1"<\/span> max<\/span>="30"<\/span>><\/<\/span>li<\/span>><\/span>\r\n    <\/<\/span>ul<\/span>><\/span>\r\n<\/<\/span>div<\/span>><\/span><\/pre> \n <\/div> \n 
\u3000\u3000css\u90e8\u5206<\/p> \n 
 \n  
*<\/span>{\r\n  padding<\/span>: 0<\/span>;\r\n  margin<\/span>: 0<\/span>;\r\n}\r\n.wrapper<\/span>{\r\n  margin<\/span>: 15px<\/span>;\r\n}\r\n.wrapper canvas<\/span>{\r\n  border<\/span>:1px solid #000<\/span>;\r\n  border-radius<\/span>: 25px<\/span>;\r\n  box-shadow<\/span>:10px 10px 5px #999<\/span>;\r\n  margin-bottom<\/span>: 20px<\/span>;\r\n}\r\n.wrapper ul<\/span>{\r\n  width<\/span>: 1000px<\/span>;\r\n  text-align<\/span>: center<\/span>;\r\n}\r\n.wrapper ul li<\/span>{\r\n  display<\/span>: inline-block<\/span>;\r\n  margin-left<\/span>: 40px<\/span>;\r\n}\r\n.wrapper ul li input<\/span>{\r\n  display<\/span>: block<\/span>;\r\n  background<\/span>: #ddd<\/span>;\r\n  color<\/span>: #000<\/span>;\r\n  border-radius<\/span>: 25px<\/span>;\r\n  border<\/span>:none<\/span>;\r\n  padding<\/span>: 10px 20px<\/span>;\r\n  font-size<\/span>: 15px<\/span>;\r\n  transition-duration<\/span>: 0.2s<\/span>;\r\n}\r\n.wrapper ul li input:hover<\/span>{\r\n  background<\/span>: #999<\/span>;\r\n  border<\/span>: 1px solid #f00<\/span>;\r\n  box-shadow<\/span>: 0 12px 16px 0 rgba(0,0,0,0.3)<\/span>;\r\n}<\/pre> \n <\/div> \n 
\u3000\u3000js\u90e8\u5206<\/p> \n 
 \n  
function<\/span> ID(str) {\r\n  <\/span>return<\/span> document.getElementById(str);\r\n}\r\n\r\n<\/span>var<\/span> darwingLineObj = {\r\n  cavs:<\/span>this<\/span>.ID("canvas"),\r\n  color:<\/span>this<\/span>.ID("color"),\r\n  clear:<\/span>this<\/span>.ID("clear"),\r\n  eraser:<\/span>this<\/span>.ID("eraser"),\r\n  rescind:<\/span>this<\/span>.ID("rescind"),\r\n  weight:<\/span>this<\/span>.ID("weight"),\r\n  bool:<\/span>false<\/span>,\r\n  arrImg:[],\r\n  <\/span>\/\/<\/span>\u521d\u59cb\u5316<\/span>\r\n  init:function<\/span>(){\r\n    <\/span>this<\/span>.draw();\r\n  },\r\n  draw:<\/span>function<\/span>(){ \r\n    <\/span>var<\/span> cavs = this<\/span>.cavs,\r\n        self <\/span>= this<\/span>,\r\n        ctx <\/span>= cavs.getContext("2d");\r\n        ctx.lineWidth <\/span>= 15;\r\n        ctx.lineCap <\/span>= "round";          \/\/<\/span>\u7ebf\u6761\u59cb\u7ec8\u7684\u6837\u5f0f<\/span>\r\n        ctx.lineJoin = "round";         \/\/<\/span>\u8f6c\u5f2f\u7684\u5706\u89d2<\/span>\r\n\r\n    var<\/span> c_x = cavs.offsetLeft,          \/\/<\/span>\u5143\u7d20\u8ddd\u79bb\u5de6\u4fa7\u7684\u4f4d\u7f6e<\/span>\r\n        c_y = cavs.offsetTop;           \/\/<\/span>canvas\u8ddd\u79bb\u9876\u90e8<\/span>\r\n        \r\n\r\n    cavs.onmousedown <\/span>= function<\/span>(e){\r\n      e <\/span>= e || window.event;\r\n      self.bool <\/span>= true<\/span>;\r\n      <\/span>var<\/span> m_x = e.pageX - c_x;\r\n      <\/span>var<\/span> m_y = e.pageY - c_y;\r\n      ctx.beginPath();\r\n      ctx.moveTo(m_x,m_y);   <\/span>\/\/<\/span>\u9f20\u6807\u5728\u753b\u5e03\u4e0a\u7684\u89e6\u70b9<\/span>\r\n\r\n      var<\/span> imgData = ctx.getImageData(0, 0, cavs.width, cavs.height);  \/\/<\/span>\u5c06\u6bcf\u6b21\u753b\u5b8c\u62f7\u8d1d\u5230\u6570\u7ec4\u4e2d<\/span>\r\n      self.arrImg.push(imgData);\r\n    }\r\n\r\n    cavs.","orderid":"0","title":"canvas\u7684\u5e38\u7528\u529f\u80fd(\u7535\u8111\u7248)(\u4e00)","smalltitle":"","mid":"0","fname":"Web","special_id":"0","bak_id":"0","info":"0","hits":"382","pages":"2","comments":"0","posttime":"2019-10-10 18:15:18","list":"1570702518","username":"admin","author":"","copyfrom":"","copyfromurl":"","titlecolor":"","fonttype":"0","titleicon":"0","picurl":"https:\/\/www.cppentry.com\/upload_files\/","ispic":"0","yz":"1","yzer":"","yztime":"0","levels":"0","levelstime":"0","keywords":"canvas<\/A> \u5e38\u7528<\/A> \u529f\u80fd<\/A> \u7535\u8111<\/A>","jumpurl":"","iframeurl":"","style":"","template":"a:3:{s:4:\"head\";s:0:\"\";s:4:\"foot\";s:0:\"\";s:8:\"bencandy\";s:0:\"\";}","target":"0","ip":"14.17.22.37","lastfid":"0","money":"0","buyuser":"","passwd":"","allowdown":"","allowview":"","editer":"","edittime":"0","begintime":"0","endtime":"0","description":"canvas\u7684\u5e38\u7528\u529f\u80fd(\u7535\u8111\u7248)","lastview":"1715596268","digg_num":"0","digg_time":"0","forbidcomment":"0","ifvote":"0","heart":"","htmlname":"","city_id":"0"},"page":"1"}