{"id":30864,"date":"2024-11-25T11:08:01","date_gmt":"2024-11-25T03:08:01","guid":{"rendered":"https:\/\/fwq.ai\/blog\/30864\/"},"modified":"2024-11-25T11:08:01","modified_gmt":"2024-11-25T03:08:01","slug":"%e5%88%a9%e7%94%a8canvas%e5%ae%9e%e7%8e%b0%e7%9b%b4%e6%92%ad%e6%97%b6%e7%82%b9%e8%b5%9e%e5%86%92%e6%b0%94%e6%b3%a1%e7%9a%84%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/30864\/","title":{"rendered":"\u5229\u7528Canvas\u5b9e\u73b0\u76f4\u64ad\u65f6\u70b9\u8d5e\u5192\u6c14\u6ce1\u7684\u6548\u679c"},"content":{"rendered":"

\u5148\u53d1canvas\u5b9e\u73b0\u76f4\u64ad\u70b9\u8d5e\u6c14\u6ce1\u6548\u679c\u56fe\uff1a<\/p>\n

\"\u5229\u7528Canvas\u5b9e\u73b0\u76f4\u64ad\u65f6\u70b9\u8d5e\u5192\u6c14\u6ce1\u7684\u6548\u679c\u63d2\u56fe\"<\/p>\n

\u5b9e\u73b0\u7ec6\u8282\uff1a<\/strong><\/p>\n

1.JS\uff1a<\/p>\n

drawImage:function(data){\r\nvar that = this \r\n    var p10= data[0][0];  \/* \u4e09\u9636\u8d1d\u585e\u5c14\u66f2\u7ebf\u8d77\u70b9\u5750\u6807\u503c*\/ \r\n    var p11= data[0][1];  \/* \u4e09\u9636\u8d1d\u585e\u5c14\u66f2\u7ebf\u7b2c\u4e00\u4e2a\u63a7\u5236\u70b9\u5750\u6807\u503c*\/ \r\n    var p12= data[0][2];  \/* \u4e09\u9636\u8d1d\u585e\u5c14\u66f2\u7ebf\u7b2c\u4e8c\u4e2a\u63a7\u5236\u70b9\u5750\u6807\u503c*\/ \r\n    var p13= data[0][3];  \/* \u4e09\u9636\u8d1d\u585e\u5c14\u66f2\u7ebf\u7ec8\u70b9\u5750\u6807\u503c*\/ \r\n    var p20= data[1][0]; \r\n    var p21= data[1][1]; \r\n    var p22= data[1][2]; \r\n    var p23= data[1][3]; \r\n    var p30= data[2][0]; \r\n    var p31= data[2][1]; \r\n    var p32= data[2][2]; \r\n    var p33= data[2][3]; \r\n    var t = factor.t; \r\n    \/*\u8ba1\u7b97\u591a\u9879\u5f0f\u7cfb\u6570 \uff08\u4e0b\u540c\uff09*\/   \r\n    var cx1 = 3*(p11.x-p10.x); \r\n    var bx1 = 3*(p12.x-p11.x)-cx1; \r\n    var ax1 = p13.x-p10.x-cx1-bx1; \r\n    var cy1 = 3*(p11.y-p10.y); \r\n    var by1 = 3*(p12.y-p11.y)-cy1; \r\n    var ay1 = p13.y-p10.y-cy1-by1; \r\n    var xt1 = ax1*(t*t*t)+bx1*(t*t)+cx1*t+p10.x; \r\n    var yt1 = ay1*(t*t*t)+by1*(t*t)+cy1*t+p10.y; \r\n    var cx2 = 3*(p21.x-p20.x); \r\n    var bx2 = 3*(p22.x-p21.x)-cx2; \r\n    var ax2 = p23.x-p20.x-cx2-bx2; \r\n    var cy2 = 3*(p21.y-p20.y); \r\n    var by2 = 3*(p22.y-p21.y)-cy2; \r\n    var ay2 = p23.y-p20.y-cy2-by2; \r\n    var xt2 = ax2*(t*t*t)+bx2*(t*t)+cx2*t+p20.x; \r\n    var yt2 = ay2*(t*t*t)+by2*(t*t)+cy2*t+p20.y; \r\n    var cx3 = 3*(p31.x-p30.x); \r\n    var bx3 = 3*(p32.x-p31.x)-cx3; \r\n    var ax3 = p33.x-p30.x-cx3-bx3; \r\n    var cy3 = 3*(p31.y-p30.y); \r\n    var by3 = 3*(p32.y-p31.y)-cy3; \r\n    var ay3 = p33.y-p30.y-cy3-by3; \r\n    \/*\u8ba1\u7b97xt yt\u7684\u503c *\/ \r\n    var xt3 = ax3*(t*t*t)+bx3*(t*t)+cx3*t+p30.x; \r\n    var yt3 = ay3*(t*t*t)+by3*(t*t)+cy3*t+p30.y; \r\n    factor.t +=factor.speed; \r\n    ctx.drawImage(\"..\/..\/images\/heart1.png\",xt1,yt1,30,30); \r\n    ctx.drawImage(\"..\/..\/images\/heart2.png\",xt2,yt2,30,30); \r\n    ctx.drawImage(\"..\/..\/images\/heart3.png\",xt3,yt3,30,30); \r\n    ctx.draw(); \r\n    if(factor.t&gt;1){ \r\n      factor.t=0; \r\n      cancelAnimationFrame(timer); \r\n      that.startTimer(); \r\n    }else{ \r\n      timer =requestAnimationFrame(function(){ \r\n        that.drawImage([[{x:30,y:400},{x:70,y:300},{x:-50,y:150},{x:30,y:0}],[{x:30,y:400},{x:30,y:300},{x:80,y:150},{x:30,y:0}],[{x:30,y:400},{x:0,y:90},{x:80,y:100},{x:30,y:0}]]) \r\n     }) \r\n    }}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
2.\u539f\u7406\uff1a <\/p>\n
a.\u901a\u8fc7\u7ed8\u5236\u4e09\u6761\u4e0d\u540c\u7684\u4e09\u9636\u8d1d\u585e\u5c14\u66f2\u7ebf\uff0c\u9009\u53d6\u4e09\u5f20\u56fe\u7247\u8ba9\u5176\u6cbf\u7740\u5404\u81ea\u7684\u8d1d\u585e\u5c14\u66f2\u7ebf\u8fd0\u52a8\uff0c\u8fd0\u52a8\u8f68\u8ff9\u5982\u4e0b\u56fe\uff1a<\/p>\n
b.\u8ba1\u7b97\u4e09\u9636\u8d1d\u585e\u5c14\u66f2\u7ebfx(t),y(t)\u7684\u6570\u5b66\u8868\u8fbe\u5f0f\u3002 <\/p>\n
\u4e09\u9636\u8d1d\u585e\u5c14\u66f2\u7ebf\u662f\u901a\u8fc7\u56db\u4e2a\u70b9\u6765\u5f62\u6210\u4e00\u6761\u66f2\u7ebf\uff0c\u4e24\u4e2a\u63a7\u5236\u70b9\uff0c\u4e00\u4e2a\u8d77\u70b9\u4e00\u4e2a\u7ec8\u70b9\u3002 <\/p>\n
\u5229\u7528\u591a\u9879\u5f0f\u7cfb\u6570\u5373\u53ef\u5f97\u5230x(t),y(t)\u7684\u6570\u5b66\u8868\u8fbe\u5f0f\uff1a
cx = 3 * ( x1 – x0 )bx = 3 * ( x2 – x1 ) – cxax = x3 – x0 – cx – bxcy = 3 * ( y1 – y0 )    by = 3 * ( y2 – y1 ) – cyay = y3 – y0 – cy – byx(t) = ax * t ^ 3 + bx * t ^ 2 + cx * t + x0y(t) = ay * t ^ 3 + by * t ^ 2 + cy * t + y0 
\u8fd9\u91cc\u753b\u4e86\u4e09\u6761\u8d1d\u585e\u5c14\u66f2\u7ebf\uff0c\u5957\u7528\u516c\u5f0f\u4e09\u6b21\u5373\u53ef\uff0c\u8fd9\u91cc\u6ca1\u6709\u91c7\u7528\u5faa\u73af\uff0c\u5982\u679c\u8d1d\u585e\u5c14\u66f2\u7ebf\u6761\u6570\u6bd4\u8f83\u591a\u65f6\uff0c\u53ef\u91c7\u7528\u5faa\u73af\u8c03\u7528 ctx.drawImage\uff0c\u5176\u4e2dfactor.t\u4e3a\u4e09\u9636\u8d1d\u585e\u5c14\u66f2\u7ebf\u7684\u53c2\u6570\uff0c\u53d6\u503c\u8303\u56f4[0,1], \u6700\u540e\u8c03\u7528ctx.draw(),\u5e76\u4e14\u8bbe\u7f6e\u5b9a\u65f6\u5668\u5373\u53ef\u5b9e\u73b0\u56fe\u7247\u6cbf\u7740\u8d1d\u585e\u5c14\u66f2\u7ebf\u8fd0\u52a8\u3002
3.Tip\uff1a <\/p>\n
\u8fd9\u91cc\u91c7\u7528\u7684\u5b9a\u65f6\u5668\u662f\u901a\u8fc7requestAnimationFrame\uff08\uff09\u51fd\u6570\u5b9e\u73b0\u7684\uff0c \u5f03\u7528setInterval\u7684\u539f\u56e0\u662f\u5b9e\u9645\u6d4b\u8bd5\u4e2d\u6709\u5361\u5e27\u73b0\u8c61\u5e76\u4e14\u52a8\u753b\u663e\u793a\u6709\u7ec6\u5fae\u7684\u4e0d\u8fde\u7eed\u3002<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5229\u7528Canvas\u5b9e\u73b0\u76f4\u64ad\u65f6\u70b9\u8d5e\u5192\u6c14\u6ce1\u7684\u6548\u679c\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5148\u53d1canvas\u5b9e\u73b0\u76f4\u64ad\u70b9\u8d5e\u6c14\u6ce1\u6548\u679c\u56fe\uff1a \u5b9e\u73b0\u7ec6\u8282\uff1a 1.JS\uff1a drawImage:function(data){ var that = this      var p10= data[0][0];  \/* \u4e09\u9636\u8d1d\u585e\u5c14\u66f2\u7ebf\u8d77\u70b9\u5750\u6807\u503c*\/      var p11= data[0][1];  \/* \u4e09\u9636\u8d1d\u585e\u5c14\u66f2\u7ebf\u7b2c\u4e00\u4e2a\u63a7\u5236\u70b9\u5750\u6807\u503c*\/      var p12= data[0][2];  \/* \u4e09\u9636\u8d1d\u585e\u5c14\u66f2\u7ebf\u7b2c\u4e8c\u4e2a\u63a7\u5236\u70b9\u5750\u6807\u503c*\/      var p13= data[0][3];  \/* \u4e09\u9636\u8d1d\u585e\u5c14\u66f2\u7ebf\u7ec8\u70b9\u5750\u6807\u503c*\/      var p20= data[1][0];      var p21= data[1][1];      var p22= data[1][2];      var p23= data[1][3];      var p30= data[2][0];      var p31= data[2][1];      var p32= data[2][2];      var p33= data[2][3];      var t = factor.t;      \/*\u8ba1\u7b97\u591a\u9879\u5f0f\u7cfb\u6570 \uff08\u4e0b\u540c\uff09*\/        var cx1 = 3*(p11.x-p10.x);      var bx1 = 3*(p12.x-p11.x)-cx1;      var ax1 = p13.x-p10.x-cx1-bx1;      var cy1 = 3*(p11.y-p10.y);      var by1 = 3*(p12.y-p11.y)-cy1;      var ay1 = p13.y-p10.y-cy1-by1;      var xt1 = ax1*(t*t*t)+bx1*(t*t)+cx1*t+p10.x;      var yt1 = ay1*(t*t*t)+by1*(t*t)+cy1*t+p10.y;      var cx2 = 3*(p21.x-p20.x);      var bx2 = 3*(p22.x-p21.x)-cx2;      var ax2 = p23.x-p20.x-cx2-bx2;      var cy2 = 3*(p21.y-p20.y);      var by2 = 3*(p22.y-p21.y)-cy2;      var ay2 = p23.y-p20.y-cy2-by2;      var xt2 = ax2*(t*t*t)+bx2*(t*t)+cx2*t+p20.x;      var yt2 = ay2*(t*t*t)+by2*(t*t)+cy2*t+p20.y;      var cx3 = 3*(p31.x-p30.x);      var bx3 = 3*(p32.x-p31.x)-cx3;      var ax3 = p33.x-p30.x-cx3-bx3;      var cy3 = 3*(p31.y-p30.y);      var by3 = 3*(p32.y-p31.y)-cy3;      var ay3 = p33.y-p30.y-cy3-by3;      \/*\u8ba1\u7b97xt yt\u7684\u503c *\/      var xt3 = ax3*(t*t*t)+bx3*(t*t)+cx3*t+p30.x;      var yt3 = ay3*(t*t*t)+by3*(t*t)+cy3*t+p30.y;      factor.t +=factor.speed;      ctx.drawImage(“..\/..\/images\/heart1.png”,xt1,yt1,30,30);      ctx.drawImage(“..\/..\/images\/heart2.png”,xt2,yt2,30,30);      ctx.drawImage(“..\/..\/images\/heart3.png”,xt3,yt3,30,30);      ctx.draw();      if(factor.t&gt;1){        factor.t=0;        cancelAnimationFrame(timer);        that.startTimer();      }else{        timer =requestAnimationFrame(function(){  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-30864","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/30864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=30864"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/30864\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=30864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=30864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=30864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}