小白教程
所有教程
关于
Search
172.69.6.137
172.69.6.137
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML Canvas 图形”的源代码
本页内容
上一节:
HTML_SVG_图形
下一节:
HTML_多媒体
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|49]] <nowiki><canvas></nowiki>元素用于在网页上绘制图形。其主要通过 JavaScript 动态绘制图形。<nowiki><canvas></nowiki>元素只是图形的容器。您必须使用 JavaScript 来实际绘制图形。 Canvas 有多种绘制路径、框、圆、文本和添加图像的方法。 == Canvas 标签 == Canvas 是 HTML 页面上的一个矩形区域。默认情况下,画布没有边框,也没有内容。 标记如下所示: <sample title="" desc="" hererun="s"> <canvas id="myCanvas" width="200" height="100"></canvas> </sample> <blockquote> 注意:始终指定一个id属性(在脚本中引用),以及一个width和height属性来定义画布的大小。要添加边框,请使用style属性。 </blockquote> <sample title="" desc="" hererun="s"> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> </sample> == 使用 JavaScript 画图 == 创建矩形画布区域后,您必须添加 JavaScript 来进行绘图。 <sample title="" desc="" hererun="s"> <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 你的浏览器不支持canvas标签.</canvas> == 画一条直线 == <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> </body> </html> </sample> == 画一个圆 == <sample title="" desc="" hererun="s"> <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 你的浏览器不支持canvas标签.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script> </body> </html> </sample> == 绘制文本 == <sample title="" desc="" hererun="s"> <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 你的浏览器不支持canvas标签.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50); </script> </body> </html> </sample> == 描边文字 == <sample title="" desc="" hererun="s"> <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 你的浏览器不支持canvas标签.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World",10,50); </script> </body> </html> </sample> == 绘制线性渐变 == <sample title="" desc="" hererun="s"> <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 你的浏览器不支持canvas标签.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // 创建渐变 var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // 绘制线性渐变 ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); </script> </body> </html> </sample> == 绘制圆形渐变 == <sample title="" desc="" hererun="s"> <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 你的浏览器不支持canvas标签.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // 创建渐变 var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // 绘制圆形渐变 ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </script> </body> </html> </sample> == 绘制图像 == <sample title="" desc="" hererun="s"> <!DOCTYPE html> <html> <body> <p>Image to use:</p> <img id="scream" src="/favicon.ico" alt="The Scream" width="220" height="277"> <p>Canvas to fill:</p> <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"> 你的浏览器不支持canvas标签.</canvas> <p><button onclick="myCanvas()">Try it</button></p> <script> function myCanvas() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img,10,10); } </script> </body> </html> </sample>
返回至“
HTML Canvas 图形
”。
上一节:
HTML_SVG_图形
下一节:
HTML_多媒体