<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas test</title> </head> <body> <!--矩形填充,fill指填充当前绘图（路径）--> <canvas id="myCanvas1">your browser does not support the canvas tag </canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas1'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.shadowBlur=20; ctx.shadowColor="gray"; ctx.fillRect(20,20,80,100); </script> <!--矩形描边,stroke指绘制已定义的路径--> <canvas id="myCanvas0">your browser does not support the canvas tag </canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas0'); var ctx=canvas.getContext('2d'); ctx.strokeRect(20,20,80,100); </script> <!--圆--> <canvas id="arc" width="200px" height="200px" style="border:1px solid gray"></canvas> <script> var arc=document.getElementById("arc"); ctx=arc.getContext("2d"); ctx.strokeStyle="red"; ctx.beginPath(); ctx.arc(100,100,50,0,2*Math.PI); ctx.arc(100,100,70,0,2*Math.PI); ctx.stroke(); </script> <!--绘制线条--> <canvas id="line" width="200px" height="200px" style="border:1px solid gray"></canvas> <script> var line=document.getElementById("line"); ctx=line.getContext("2d"); ctx.fillStyle="red"; ctx.moveTo(0,0); ctx.lineTo(100,100); ctx.lineTo(200,0); ctx.lineTo(200,150); ctx.lineTo(0,150); ctx.lineTo(0,0); ctx.fill(); </script> <!--文本--> <canvas id="txt" width="200px" height="200px" style="border:1px solid red">您的浏览器不支持 HTML5 canvas 标签。</canvas> <script> var txt=document.getElementById("txt"); var text=txt.getContext("2d"); text.font="60px 微软雅黑"; text.fillText("练习",40,110); </script> <!--文本空心--> <canvas id="txt1" width="200px" height="200px" style="border:1px solid red">您的浏览器不支持 HTML5 canvas 标签。</canvas> <script> var txt=document.getElementById("txt1"); var text=txt.getContext("2d"); text.strokeStyle="red" text.font="60px 微软雅黑"; text.strokeText("练习",40,110); </script> <!--渐变--> <canvas id="gradient" width="200px" height="200px" style="border:1px solid red"></canvas> <script> var c=document.getElementById("gradient"); var text=c.getContext("2d"); <!--线性渐变--> var gra=text.createLinearGradient(0,0,0,200); gra.addColorStop(0,'red'); gra.addColorStop(1,'#000'); text.fillStyle=gra; text.fillRect(0,0,200,200); </script> <canvas id="gradient2" width="200px" height="200px" style="border:1px solid red"></canvas> <script> var c=document.getElementById("gradient2"); var text=c.getContext("2d"); <!--径向渐变--> var lin=text.createRadialGradient(100,100,30,100,100,100); lin.addColorStop(0,'#fff'); lin.addColorStop(1,'#000'); text.fillStyle=lin; text.fillRect(0,0,200,200); </script> </body> </html>