前端html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html5绘图</title> </head> <body> <canvas id="cansp" height="600px" width="500px" style="border: 1px solid red;"></canvas> </body> </html>
script：
<script type="text/javascript">
var can=document.getElementById("cansp");
var ctxt=can.getContext("2d");
//画直线
ctxt.moveTo(20,20);
ctxt.lineTo(20,100);
ctxt.stroke();
//画填充三角形 (路劲)
ctxt.beginPath();//开始新路劲 因为上面的ctxt定位在20,20 否则会重合
ctxt.moveTo(40,20); //移动到 40,20 (起点)
ctxt.lineTo(40,100);//下一个点
ctxt.lineTo(80,100);//下一个点
ctxt.closePath(); //闭合路劲
//ctxt.fill();//填充
ctxt.stroke();//画线 (相对 file空心)
//画出矩形可以不要路劲
ctxt.strokeRect(100,20,70,80);
//实心矩形
ctxt.fillStyle="red";
ctxt.fillRect(200,20,70,50);
//圆形
ctxt.beginPath();
ctxt.arc(300,50,20,0,360,true);
ctxt.closePath();
ctxt.stroke();
//实心
ctxt.beginPath();
ctxt.fillStyle="yellow";
ctxt.arc(350,50,20,0,360,true);
ctxt.closePath();
ctxt.fill();
//画图像(第一创建image 对象)
var img=new Image();
img.src="img/a.jpg";
img.onload=function(){
ctxt.drawImage(img,20,120,254,356);
};
//在画布上画字
var text="伊丽莎白一世";
ctxt.fillStyle="#0000FF";
ctxt.font="30px 宋体";
ctxt.fillText(text,300,150);
</script>
图片：
