<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="myCanvas" width="80px" height="80px" style="border: 1px solid #000000"></canvas> <canvas id="myCanvas2"></canvas> <canvas id="myCanvas3"></canvas> <canvas id="myCanvas4"></canvas> <canvas id="myCanvas5"></canvas> <canvas id="myCanvas6"></canvas> <script> <!--原刑渐变--> var h = document.getElementById("myCanvas6"); var ctx6 = h.getContext("2d"); var grd2 = ctx6.createRadialGradient(50,90,15,90,60,100); grd2.addColorStop(0,"red"); grd2.addColorStop(1,"white"); ctx6.fillStyle=grd2; ctx6.fillRect(10,10,150,80); <!--长方行颜色渐变--> var g=document.getElementById("myCanvas5"); var ctx5 = g.getContext("2d"); var grad = ctx5.createLinearGradient(0,0,200,0); grad.addColorStop(1,"red"); grad.addColorStop(0,"white"); ctx5.fillStyle=grad; ctx5.fillRect(20,20,150,150); <!--空心文字--> var f = document.getElementById("myCanvas4"); var ctx4 = f.getContext("2d"); ctx4.font="30px Arial"; ctx4.strokeText("Hello World",10,50); <!--实心文字--> var e = document.getElementById("myCanvas3") <!--获得上下文，并定义文字属性--> var ctx3= e.getContext("2d"); ctx3.font="30px Arial"; ctx3.textBaseline="hanging"; ctx3.textAlign="ltr"; ctx3.fillText("Hello World",10,50); <!--画圆--> var d = document.getElementById("myCanvas2"); var ctx2 = d.getContext("2d"); ctx2.beginPath(); ctx2.arc(95,50,40,0,2*Math.PI); ctx2.stroke(); <!--画布设置颜色--> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,35,25); ctx.moveTo(0,0); ctx.lineTo(35,25); ctx.stroke(); </script> </body> </html>
