SOURCE

console 命令行工具 X clear

                    
>
console
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#000000";
ctx.fillRect(50,10,100,75);

var c=document.getElementById("my1");
var ctx=c.getContext("2d");
var cty=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(100,50);
ctx.stroke();
cty.moveTo(100,50);
cty.lineTo(200,0);
cty.stroke();

var c=document.getElementById("my2");
var ctx=c.getContext("2d");
var cty=c.getContext("2d");
var ctz=c.getContext("2d");
var cta=c.getContext("2d");
var ctb=c.getContext("2d");
ctx.beginPath();
ctx.arc(70,40,20,0,2*Math.PI);
ctx.strokeStyle="blue";
ctx.lineWidth = 5;
ctx.stroke();
cty.beginPath();
cty.arc(100,40,20,0,2*Math.PI);
cty.strokeStyle="black";
cty.stroke();
ctz.beginPath();
ctz.arc(130,40,20,0,2*Math.PI);
ctz.strokeStyle="red";
ctz.stroke();
cta.beginPath();
cta.arc(115,60,20,0,2*Math.PI);
cta.strokeStyle="green";
cta.stroke();
ctb.beginPath();
ctb.arc(85,60,20,0,2*Math.PI);
ctb.strokeStyle="yellow";
ctb.stroke();

var c=document.getElementById("my3");
var ctx=c.getContext("2d");
var cty=c.getContext("2d");
ctx.font="20px Arial";
cty.font="20px Arial";
var grd=ctx.createLinearGradient(0,0,c.width,0);
grd.addColorStop(0,"magenta");
grd.addColorStop(0.5,"blue");
grd.addColorStop(1,"red");
ctx.strokeStyle=grd;
ctx.strokeText("如鲸向海,似鸟投林",10,70);
cty.strokeStyle=grd;
cty.strokeText("我爱你",65,40);
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<canvas id="my1" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<canvas id="my2" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<canvas id="my3" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>