html5中怎样编程画布,html5 canvas画布详解

html>

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();