<html> <head> <title>canvas demo</title> </head> <body> <canvas id="mycanvas" width="500px" height="500px" ></canvas> <script type="text/javascript"> var mycanvas = document.getElementById("mycanvas"); var mycontext = mycanvas.getContext("2d"); mycontext.beginPath(); mycontext.strokeStyle = "red"; mycontext.moveTo(70, 140); mycontext.lineTo(140, 70); mycontext.lineTo(300,200); mycontext.lineWidth="5"; mycontext.stroke(); mycontext.beginPath(); mycontext.strokeStyle = "blue"; mycontext.moveTo(200, 200); mycontext.lineTo(400, 500); mycontext.stroke(); </script> <style> #mycanvas{ border: solid 1px; } </style> </body> </html>
效果图
beginPath()
刷新（开始）画图的开头
moveTo()
开始点
lineto()
记录点，可以多个
stroke()
绘制从beginPath()开始设置的定义图形
原文：http://www.cnblogs.com/fj0716/p/4765743.html