前端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>
图片: