{"id":27731,"date":"2024-11-24T19:54:51","date_gmt":"2024-11-24T11:54:51","guid":{"rendered":"https:\/\/fwq.ai\/blog\/?p=27731"},"modified":"2024-11-24T19:54:51","modified_gmt":"2024-11-24T11:54:51","slug":"html-5%e4%b8%adcanvas%e7%9a%84%e5%ba%94%e7%94%a8","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/27731\/","title":{"rendered":"Html 5\u4e2dcanvas\u7684\u5e94\u7528"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>\u5148\u770b\u4e00\u6bb5\u5b9e\u4f8b\uff1a<\/p>\n<pre>&lt;script&gt;\r\nvar c=document.getElementById(\"myCanvas\");\r\n\r\n#getContext(\"2d\") \u5bf9\u8c61\u662f\u5185\u5efa\u7684 HTML5 \u5bf9\u8c61\uff0c\u62e5\u6709\u591a\u79cd\u7ed8\u5236\u8def\u5f84\u3001\u77e9\u5f62\u3001\u5706\u5f62\u3001\u5b57\u7b26\u4ee5\u53ca\u6dfb\u52a0\u56fe\u50cf\u7684\u65b9\u6cd5\r\nvar ctx=c.getContext(\"2d\");\r\n\r\nctx.fillStyle=\"#FF0000\";\r\nctx.fillRect(0,0,150,75);\r\n&lt;\/script&gt;<\/pre>\n<ul>\n<li><strong>Canvas \u5750\u6807<\/strong><\/li>\n<\/ul>\n<ul>\n<li><strong>Canvas \u8def\u5f84<\/strong><\/li>\n<\/ul>\n<pre>\/\/\u7ed8\u5236\u6298\u7ebf\r\nctx.moveTo(10,10);\r\nctx.lineTo(50,150);\r\nctx.lineTo(100,10);\r\nctx.lineWidth = 1;\/\/\u7ebf\u6761\u7684\u5bbd\u5ea6\r\nctx.strokeStyle = \"#FF0000\";\/\/\u7ebf\u6761\u7684\u989c\u8272\r\nctx.stroke();\r\n\r\n\/\/\u7ed8\u5236\u5706\u5f62\r\nctx.beginPath();\r\n\u2028ctx.arc(80,80,50,0,2*Math.PI );\r\n\u2028ctx.lineWidth = 1;\u2028\r\nctx.strokeStyle = \"#FF0000\";\r\n\u2028ctx.stroke();\r\n\r\n\/\/\u5b9e\u5fc3\u5706\r\nctx.beginPath();\r\nctx.arc(80,80,50,0,1*Math.PI );\r\nctx.fillStyle = \"#FF0000\";\r\nctx.fill();<\/pre>\n<ul>\n<li><strong>Canvas \u6587\u672c<\/strong><\/li>\n<\/ul>\n<pre>ctx.font=\"30px Arial\";\r\nctx.fillStyle = \"#FF0000\";\r\nctx.fillText(\"Hello World\",10,50);\r\n\r\nctx.strokeStyle = \"#FF0000\";\r\nctx.strokeText(\"Hello World\",10,50);<\/pre>\n<ul>\n<li><strong>Canvas \u6e10\u53d8<\/strong><\/li>\n<\/ul>\n<p>\u6e10\u53d8\u53ef\u4ee5\u586b\u5145\u5728\u77e9\u5f62, \u5706\u5f62, \u7ebf\u6761, \u6587\u672c\u7b49\u7b49, \u5404\u79cd\u5f62\u72b6\u53ef\u4ee5\u81ea\u5df1\u5b9a\u4e49\u4e0d\u540c\u7684\u989c\u8272\u3002<br \/>\n\u4ee5\u4e0b\u6709\u4e24\u79cd\u4e0d\u540c\u7684\u65b9\u5f0f\u6765\u8bbe\u7f6eCanvas\u6e10\u53d8\uff1a<br \/>\ncreateLinearGradient(x,y,x1,y1) \u2013 \u521b\u5efa\u7ebf\u6761\u6e10\u53d8<br \/>\ncreateRadialGradient(x,y,r,x1,y1,r1) \u2013 \u521b\u5efa\u4e00\u4e2a\u5f84\u5411\/\u5706\u6e10\u53d8<br \/>\n\u5f53\u6211\u4eec\u4f7f\u7528\u6e10\u53d8\u5bf9\u8c61\uff0c\u5fc5\u987b\u4f7f\u7528\u4e24\u79cd\u6216\u4e24\u79cd\u4ee5\u4e0a\u7684\u505c\u6b62\u989c\u8272\u3002<br \/>\naddColorStop()\u65b9\u6cd5\u6307\u5b9a\u989c\u8272\u505c\u6b62\uff0c\u53c2\u6570\u4f7f\u7528\u5750\u6807\u6765\u63cf\u8ff0\uff0c\u53ef\u4ee5\u662f0\u81f31.<br \/>\n\u4f7f\u7528\u6e10\u53d8\uff0c\u8bbe\u7f6efillStyle\u6216strokeStyle\u7684\u503c\u4e3a \u6e10\u53d8\uff0c\u7136\u540e\u7ed8\u5236\u5f62\u72b6\uff0c\u5982\u77e9\u5f62\uff0c\u6587\u672c\uff0c\u6216\u4e00\u6761\u7ebf\u3002<br \/>\n\u4f7f\u7528 createLinearGradient():<\/p>\n<pre>\/\/\u77e9\u5f62\u6e10\u53d8\r\nvar grd=ctx.createLinearGradient(0,0,200,0);\r\ngrd.addColorStop(0,\"red\");\r\ngrd.addColorStop(1,\"white\");\r\nctx.fillStyle=grd; \/\/\u6e10\u53d8\u6837\u5f0f\r\nctx.fillRect(10,10,150,80)\r\n\r\n\/\/\u5411\u4e2d\u5fc3\u7684\u6e10\u53d8\r\nvar grd=ctx.createRadialGradient(75,50,5,90,60,100);\r\ngrd.addColorStop(0,\"red\");\r\ngrd.addColorStop(1,\"white\");\r\nctx.fillStyle=grd;\r\nctx.fillRect(10,10,150,80);<\/pre>\n<ul>\n<li><strong>Canvas \u56fe\u50cf<\/strong><\/li>\n<\/ul>\n<pre>var img=document.getElementById(\"scream\");\r\nctx.drawImage(img,10,10);<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; \u5148\u770b\u4e00\u6bb5\u5b9e\u4f8b\uff1a &lt;script&gt; var c=document.getElementById(&#8220;myCanvas&#8221;); #getContext(&#8220;2d&#8221;) \u5bf9\u8c61\u662f\u5185\u5efa\u7684 HTML5 \u5bf9\u8c61\uff0c\u62e5\u6709\u591a\u79cd\u7ed8\u5236\u8def\u5f84\u3001\u77e9\u5f62\u3001\u5706\u5f62\u3001\u5b57\u7b26\u4ee5\u53ca\u6dfb\u52a0\u56fe\u50cf\u7684\u65b9\u6cd5 var ctx=c.getContext(&#8220;2d&#8221;); ctx.fillStyle=&#8221;#FF0000&#8243;; ctx.fillRect(0,0,150,75); &lt;\/script&gt; Canvas \u5750\u6807 Canvas \u8def\u5f84 \/\/\u7ed8\u5236\u6298\u7ebf ctx.moveTo(10,10); ctx.lineTo(50,150); ctx.lineTo(100,10); ctx.lineWidth = 1;\/\/\u7ebf\u6761\u7684\u5bbd\u5ea6 ctx.strokeStyle = &#8220;#FF0000&#8221;;\/\/\u7ebf\u6761\u7684\u989c\u8272 ctx.stroke(); \/\/\u7ed8\u5236\u5706\u5f62 ctx.beginPath(); \u2028ctx.arc(80,80,50,0,2*Math.PI ); \u2028ctx.lineWidth = 1;\u2028 ctx.strokeStyle = &#8220;#FF0000&#8221;; \u2028ctx.stroke(); \/\/\u5b9e\u5fc3\u5706 ctx.beginPath(); ctx.arc(80,80,50,0,1*Math.PI ); ctx.fillStyle = &#8220;#FF0000&#8243;; ctx.fill(); Canvas \u6587\u672c ctx.font=&#8221;30px Arial&#8221;; ctx.fillStyle = &#8220;#FF0000&#8221;; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-27731","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/27731","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=27731"}],"version-history":[{"count":1,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/27731\/revisions"}],"predecessor-version":[{"id":27739,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/27731\/revisions\/27739"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=27731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=27731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=27731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}