html5 涂鸦,html5 canvas 涂鸦

HTML>

// get canvas instance

var canvas=document.getElementById("myCanvas");

var ctx=canvas.getContext("2d");

// draw a line

ctx.moveTo(10,10);

ctx.lineTo(150,50);

ctx.lineTo(10,50);

ctx.stroke();

// draw a circle

ctx.beginPath();

ctx.arc(100,100,30,0,Math.PI*2,true);

ctx.closePath();

ctx.stroke();

// fill a circle

ctx.fillStyle="#FF0000";

ctx.beginPath();

ctx.arc(100,200,30,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

// create linear gradient

var linearGrd=ctx.createLinearGradient(0,0,270,0);

linearGrd.addColorStop(0,"black");

linearGrd.addColorStop(0.5,"red");

linearGrd.addColorStop(1,"white");

ctx.fillStyle=linearGrd;

ctx.fillRect(120,230,140,40);

// create radial gradient

var radialGrd = ctx.createRadialGradient(400,400,50,400,400,100);

radialGrd.addColorStop(0,"red");

radialGrd.addColorStop(1,"white");

ctx.fillStyle=radialGrd;

ctx.fillRect(300,300,500,500);

// draw image

var img=new Image();

img.src="e.jpg";

img.οnlοad=function(){

ctx.drawImage(img,0,0,50,50,0,400,50,50);

};