var c=document.getElementById("myCanvas2");
var cxt2=c.getContext("2d");
cxt2.moveTo(10,10);
cxt2.lineTo(150,50);
cxt2.lineTo(10,50);
cxt2.lineTo(150,90);
cxt2.stroke();
var c4=document.getElementById("myCanvas4");
var cxt4=c4.getContext("2d");
var grd=cxt.createLinearGradient(0,0,100,100);
grd.addColorStop(0,"grey"); //渐变开始
grd.addColorStop(1,"white"); //渐变结束
cxt4.fillStyle=grd;
cxt4.fillRect(10,10,175,50); //位置,大小
var c5 = document.getElementById("myCanvas5");
var cxt5 = c5.getContext("2d");
var img = new Image();
img.height ='100';
img.src ='wm.png';
cxt5.drawImage(img,10,20,100,80);
HTML canvas画长方形html<h5>画板一:画一个长方形</h5><canvas id="myCanvas" width="200" height="150" style="border:1px solid #c3c3c3;"></canvas>scriptvar cxt=myCanvas.getContext("2d"); cxt.fillStyle="yellow"; var x = 10; var y = 10;